React组件中点击按钮一次获取axios.post返回值的解决方案

嘿，我来帮你搞定这个头疼的问题！咱们先看看问题出在哪儿：

你的代码里，axios.post是异步操作——它不会立刻返回结果，而是等请求完成后才会执行then或catch里的回调。但你现在在发起请求后立刻就调用了this.setState，这时候self.rep还是初始值"ini"，所以第一次点击后页面显示的还是初始状态。等第二次点击时，上一次的异步请求已经完成，self.rep被更新成了接口返回的数据，这时候setState才拿到正确的值，页面才会显示出来。

修复方案一：直接在异步回调里更新state（推荐） #

既然我们要等异步请求完成后才能拿到数据，那把setState放到then和catch的回调里就好了，而且完全没必要用额外的rep变量——React的state就是用来管理组件状态的：

class ButtonComponent extends React.Component {
  state = { display: "ini" };

  click() {
    axios.post("url", {})
      .then((rep) => {
        // 请求成功，直接用返回数据更新state
        this.setState({ display: rep.data });
      })
      .catch((err) => {
        // 错误处理：把错误转成字符串，避免直接显示对象看不到内容
        this.setState({ display: err.message || err.toString() });
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.click.bind(this)}> click me </button>
        {this.state.display}
      </div>
    );
  }
};

修复方案二：用async/await简化异步代码（更易读） #

如果你觉得Promise链式调用看着麻烦，可以用async/await语法，让异步代码看起来像同步逻辑：

class ButtonComponent extends React.Component {
  state = { display: "ini" };

  async click() {
    try {
      // 等待请求完成
      const rep = await axios.post("url", {});
      this.setState({ display: rep.data });
    } catch (err) {
      // 捕获错误并更新状态
      this.setState({ display: err.message || err.toString() });
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.click.bind(this)}> click me </button>
        {this.state.display}
      </div>
    );
  }
};

额外提醒 #

• 尽量不要用组件实例的属性（比如this.rep）来存储和UI相关的状态，全部交给state管理，React才能正确追踪状态变化并触发重新渲染。
• 错误处理时，直接显示err对象可能看不到有效信息，建议提取err.message或者转成字符串。

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