React中首次调用setState无响应问题求助

看起来你遇到的核心问题是React setState的异步特性，加上代码逻辑里对state更新时机的错误依赖，导致你觉得this.setState({ previousState })没触发——其实它触发了，只是你没在正确的时机拿到更新后的值而已。

先拆解下你代码里的问题：

• 当你调用changeProperty()里的setState时，React不会立刻更新组件的state，它会把这个更新放到队列里，等合适的时机再批量执行。所以在changeProperty()调用完马上创建info对象时，this.state.previousState还是原来的旧值，不是你刚设置的新值。
• 另外还要确认下你的函数是否正确绑定了this，如果是类组件里的普通函数，this可能会指向undefined，导致setState根本无法执行（如果控制台没报错的话，大概率你已经处理了绑定，但还是提一句）。

解决方案1：直接计算值，跳过异步state依赖 #

最简洁的方式是在uploadInfo里直接计算previousState，不用单独调用changeProperty再依赖state的异步更新：

function uploadInfo() {
  // 直接在这里计算需要的previousState，不用依赖setState的异步更新
  let previousState = this.state.previousState;
  if (this.state.counter !== 0) {
    previousState = this.state.hashes[this.state.counter - 1];
  }

  const info = {
    name: 'Red Cup',
    price: 10,
    supply: 500,
    previousState,
    counter: this.state.counter,
  };

  uploadEntry(info)
    .then(res => {
      // 更新state时用函数式写法，避免依赖当前state的旧值
      this.setState(prevState => ({
        hashes: [...prevState.hashes, res],
        counter: prevState.counter + 1,
        // 这里可以顺便把previousState更新为最新的hash，方便下次使用
        previousState: prevState.hashes[prevState.counter]
      }))
    })
    .catch(err => console.log(err))
}

解决方案2：等待state更新完成再执行后续逻辑 #

如果你一定要保留changeProperty函数，可以把它改成返回Promise的形式，用async/await等待state更新完成：

// 修改changeProperty，返回Promise等待setState完成
function changeProperty() {
  return new Promise(resolve => {
    if (this.state.counter !== 0) {
      const previousState = this.state.hashes[this.state.counter - 1];
      this.setState({ previousState }, resolve);
    } else {
      resolve();
    }
  });
}

// 用async/await改造uploadInfo
async function uploadInfo() {
  // 等待previousState更新完成
  await this.changeProperty();
  
  const info = {
    name: 'Red Cup',
    price: 10,
    supply: 500,
    previousState: this.state.previousState,
    counter: this.state.counter,
  };

  try {
    const res = await uploadEntry(info);
    this.setState(prevState => ({
      hashes: [...prevState.hashes, res],
      counter: prevState.counter + 1,
    }));
  } catch (err) {
    console.log(err);
  }
}

额外提醒：确保this绑定正确 #

如果你的组件是类组件，一定要确保函数的this指向组件实例：

• 可以在构造函数里手动绑定：

constructor(props) {
  super(props);
  this.state = { hashes: [], counter: 0, previousState: null };
  this.uploadInfo = this.uploadInfo.bind(this);
  this.changeProperty = this.changeProperty.bind(this);
}

• 或者用箭头函数定义方法：

uploadInfo = async () => {
  // 函数内容...
}

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