React Native状态赋值失败：导航传值后无法更新state

嘿，这个问题我之前刚踩过坑～核心原因是React的setState是异步操作，你没法在调用setState之后立刻就读到更新后的state值。

问题拆解 #

当你执行this.setState({note_number: x})时，React并不会马上修改state，而是把这个更新请求加入到任务队列中，等当前渲染周期结束后才会批量处理更新。所以你紧接着写的console.log(this.state.note_number)，读取的还是初始化时的空字符串，也就是更新前的旧值。这就是为什么你打印x是正确的，但打印state.note_number为空。

解决方案 #

这里给你几个可行的处理方式：

1. 使用setState的回调函数（最直接的解决办法）

setState支持第二个参数，这是一个回调函数，会在state更新完成并且组件重新渲染后执行。你可以把打印逻辑放在这个回调里：

componentDidMount() {
  const {params} = this.props.navigation.state;
  let x = params.note_number;
  this.setState({note_number: x}, () => {
    // 这个回调会在state更新完成后触发
    console.log(this.state.note_number); // 这里就能拿到正确的更新后的值了
  });
}

2. 直接打印参数x

既然你已经确认x是正确的note_number值，其实没必要非得等state更新后再打印，直接打印x就能验证参数传递是否成功：

componentDidMount() {
  const {params} = this.props.navigation.state;
  let x = params.note_number;
  this.setState({note_number: x});
  console.log(x); // 直接打印参数，确认值正确即可
}

3. 用componentDidUpdate监听state变化

如果后续你需要在state更新后执行更多复杂逻辑，可以用componentDidUpdate生命周期钩子来监听state的变化：

componentDidMount() {
  const {params} = this.props.navigation.state;
  let x = params.note_number;
  this.setState({note_number: x});
}

componentDidUpdate(prevProps, prevState) {
  // 只有当note_number发生变化时才执行逻辑
  if (prevState.note_number !== this.state.note_number) {
    console.log(this.state.note_number);
  }
}

额外小提示 #

如果你使用的是React Navigation 5及以上版本，参数的接收方式已经更新为this.props.route.params了，不过你当前的写法在旧版本中是完全没问题的～

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