React Native首次点击时如何同时切换页面并更新state

这个问题我太熟了！核心原因是React的setState是异步执行的——你调用setState之后，React并不会立刻更新state，而是把更新任务放进队列里，等合适的时机再批量处理。所以你紧接着去拿this.state.weapon，拿到的还是更新前的null，只有等state真正更新完成后，再次点击按钮才能拿到正确的"M16"。

给你两种靠谱的解决思路：

方案一：利用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，会在state完全更新完成后执行。把导航逻辑放在这个回调里，就能确保拿到最新的state值：

clickM16 = () => {
  this.setState({ weapon: "M16" }, () => {
    // 这里state已经更新完毕，可以放心获取最新值
    this.props.navigation.navigate("Second", {weapon: this.state.weapon});
  });
}

方案二：直接传递目标值（更简洁高效） #

既然你已经明确要设置的武器是"M16"，没必要绕一圈从state里取，直接把这个字符串作为参数传递就行，完全避开异步的坑：

clickM16 = () => {
  const selectedWeapon = "M16";
  this.setState({ weapon: selectedWeapon });
  this.props.navigation.navigate("Second", {weapon: selectedWeapon});
}

如果后续你的state更新逻辑更复杂（比如需要依赖之前的state值计算新值），推荐用方案一或者函数式更新；但这个场景下，方案二更直接省心。

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