React中点击按钮如何通过Props切换Switch Case状态？

我来帮你梳理下问题并给出解决方案：

你现在的核心问题是**confirmationStatus是Props，而Props是只读的，不能直接在组件内部修改**。要实现点击按钮后切换case展示对应内容，你需要把这个状态的控制权交给组件自身的state（或者由父组件管理状态并提供更新回调）——只有state更新才会触发组件重新渲染，从而让switch case切换展示逻辑。

情况1：组件自身维护状态（最常用场景） #

这种情况下，我们把confirmationStatus从Props移到组件的state中，初始值可以沿用Props传入的默认值，然后在请求完成后通过setState更新状态，触发重新渲染。

修改后的完整代码如下：

enum Statuses { SUCCESS = 'success', ERROR = 'error', }
interface Props { 
  // 可选：保留Props用于接收父组件传递的初始状态
  initialConfirmationStatus?: Statuses; 
  error?: string; 
}

// 定义组件的State类型
interface State {
  orderId: string; // 保留你原本的state字段
  resData: string;
  confirmationStatus?: Statuses;
}

class YourComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      orderId: '', // 填入你的初始orderId值
      resData: '',
      confirmationStatus: props.initialConfirmationStatus
    };
  }

  public render() {
    return (
      <>
        {this.getMessage()}
        <button onClick={this.handleSubmit}> Submit </button>
      </>
    )
  }

  private getMessage = () => {
    // 改用state中的confirmationStatus做判断
    switch (this.state.confirmationStatus) {
      case Statuses.ERROR:
        return ( <>
          <FormattedMessage {...messages.paymentError} />: {this.props.error || '请求失败'}
        </> );
      case Statuses.SUCCESS:
        return ( <FormattedMessage {...messages.paymentSuccess} /> );
      default:
        // 默认状态展示提示，避免空白
        return <span>点击提交完成操作</span>;
    }
  };

  private handleSubmit = () => {
    const url = 'xxx';
    fetch(url, {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      mode: 'cors',
      method: 'PATCH',
      body: JSON.stringify({ orderCode: this.state.orderId }),
    })
    .then(response => {
      // 先判断HTTP请求是否成功（避免4xx/5xx错误进入成功回调）
      if (!response.ok) {
        throw new Error('请求失败');
      }
      return response.text();
    })
    .then(res => {
      // 请求成功，更新状态为SUCCESS
      this.setState({
        resData: res,
        confirmationStatus: Statuses.SUCCESS
      });
    })
    .catch(e => {
      console.log(e);
      // 请求失败，更新状态为ERROR
      this.setState({
        confirmationStatus: Statuses.ERROR
      });
    });
  };
}

这里要注意几个关键细节：

• 禁止直接修改state：原代码里this.state.resData = res是错误的，必须用this.setState()更新状态，React才会触发组件重新渲染。
• 添加default分支：switch case一定要加default，避免状态未定义时页面空白。
• 判断请求有效性：不要只依赖then回调，要通过response.ok判断HTTP状态码是否正常。

情况2：状态由父组件管理 #

如果confirmationStatus需要被多个组件共享，或者由父组件统一控制，那么你需要在父组件中维护状态，并传递一个更新状态的回调函数给子组件：

父组件示例代码： #

class ParentComponent extends React.Component {
  state = {
    confirmationStatus: undefined as Statuses | undefined
  };

  updateConfirmationStatus = (status: Statuses) => {
    this.setState({ confirmationStatus: status });
  };

  render() {
    return (
      <YourComponent 
        confirmationStatus={this.state.confirmationStatus}
        onUpdateStatus={this.updateConfirmationStatus}
      />
    );
  }
}

子组件修改后的关键代码： #

interface Props { 
  confirmationStatus?: Statuses; 
  error?: string;
  onUpdateStatus: (status: Statuses) => void; // 添加回调Props
}

class YourComponent extends React.Component<Props> {
  // ... 其他代码保持不变

  private getMessage = () => {
    // 继续使用Props中的confirmationStatus
    switch (this.props.confirmationStatus) {
      // ... 原有case逻辑不变
    }
  };

  private handleSubmit = () => {
    const url = 'xxx';
    fetch(url, {
      // ... 请求配置不变
    })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.text();
    })
    .then(res => {
      // 调用父组件的回调更新状态
      this.props.onUpdateStatus(Statuses.SUCCESS);
    })
    .catch(e => {
      console.log(e);
      this.props.onUpdateStatus(Statuses.ERROR);
    });
  };
}

父组件的状态更新后，会把新的confirmationStatus传递给子组件，子组件重新渲染时getMessage就会切换到对应的case。

总结一下：核心思路是让confirmationStatus成为可更新的状态（组件自身state或父组件state），因为Props是只读的，无法直接修改来触发渲染。通过setState（或父组件的回调）更新状态后，组件会重新渲染，switch case就会展示对应的数据了。

内容的提问来源于stack exchange，提问作者dhawalm