React Native更新状态后addListener未触发预期逻辑的问题

嘿，我一眼就看出问题所在了——你遇到的是JavaScript闭包捕获旧值的经典坑！

你在componentDidMount里注册的willFocus监听器，它的回调函数是在组件挂载时创建的，这个函数会捕获当时的this.state（也就是初始的{number:1, newNumber:undefined}）。之后你点击按钮更新newNumber为1，虽然组件的state确实更新了，但监听器回调里访问的还是闭包中保存的旧state引用，所以判断永远是1 !== undefined，自然不会触发state is the same的日志。

下面给你两种靠谱的解决办法，按需选择：

方案一：直接在状态更新时做判断（最推荐） #

如果你只是想在newNumber变化后，判断它和number是否相等，完全不需要依赖导航的willFocus监听。直接用componentDidUpdate生命周期或者setState的回调就能搞定：

用componentDidUpdate监听状态变化 #

componentDidUpdate(prevProps, prevState) {
  // 只在newNumber发生变化时执行判断
  if (prevState.newNumber !== this.state.newNumber) {
    if (this.state.number === this.state.newNumber) {
      console.log('state is the same');
    } else {
      console.log('state is not the same');
    }
  }
}

或者在setState的回调里直接处理 #

如果你只需要在点击按钮更新后立刻判断，也可以把逻辑写在setState的第二个参数里：

<Button 
  title='update' 
  onPress={()=> this.setState(
    {newNumber:1}, 
    ()=> {
      console.log(this.state.newNumber, 'newNumber');
      // 在这里直接判断
      if (this.state.number === this.state.newNumber) {
        console.log('state is the same');
      }
    }
  )}
/>

方案二：如果必须依赖willFocus监听（处理闭包问题） #

如果你确实需要在页面聚焦时做这个判断，那得想办法让监听器能拿到最新的state。可以用ref来实时保存最新状态：

export default class Update extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number:1,
      newNumber:undefined
    }
    // 创建ref保存最新state
    this.latestState = React.createRef();
    this.latestState.current = this.state;
    console.log(this.state.number, 'number')
  }

  componentDidMount() {
    // 保存监听引用，方便后续移除
    this.focusListener = this.props.navigation.addListener('willFocus', () => {
      // 从ref里拿最新的state
      const { number, newNumber } = this.latestState.current;
      if(number !== newNumber){
        console.log('state is not the same')
      }
      if(number === newNumber){
        console.log('state is the same')
      }
    })
  }

  componentDidUpdate() {
    // 每次state更新后，同步更新ref
    this.latestState.current = this.state;
  }

  componentWillUnmount() {
    // 一定要移除监听，防止内存泄漏
    this.focusListener();
  }

  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Button title='update' onPress={()=> this.setState({newNumber:1}, ()=> console.log(this.state.newNumber, 'newNumber'))}/>
      </View>
    );
  }
}

额外提醒 #

1. 类组件中添加导航监听器后，务必在componentWillUnmount里移除，避免内存泄漏。
2. 如果你用的是React Navigation 5及以上版本，函数组件推荐用useFocusEffect钩子，它能更好地处理这类状态同步问题。
3. 永远记住：闭包会捕获函数创建时的变量引用，不要在异步/延迟执行的函数里直接依赖组件的旧state/prop值。

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