javascript - react native : update state then check with addListener

Question

我正在尝试更新状态，然后使用“componentDidMount”中的“addListener”检查状态

当我更新状态时，我可以看到我的状态已成功更新，但 addListener 不会更新。

我认为当我更新状态但注意到正在发生时，我应该看到 console.log('state is the same')。

有什么想法吗？

这是我的代码:

export default class Update extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number:1,
      newNumber:undefined
    }
    console.log(this.state.number, 'number')
  }

  componentDidMount() {

    this.props.navigation.addListener('willFocus', () => {
      //when screen is loaded I get this console.
      if(this.state.number != this.state.newNumber){
        console.log('state is not the same')
      }
      //when I update state I should see this console log but nothing is happening.
      if(this.state.number == this.state.newNumber){
        console.log('state is the same')
      }
    })
  }

  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>
    );
  }
}

Answer 1

基本上，您想要实现的目标是检查按钮的 onClick 是否设置了 newState，并且您想检查现有的状态，它是否正确更新。

因此，您正在使用 this.props.navigation.addListener('willFocus') 当屏幕聚焦而来自其他屏幕时，它会被调用。但在您的情况下，您位于同一屏幕，并且通过调用按钮来更新状态，因此不会被调用。

react 有自己的生命周期方法，称为 componentDidUpdate ，如果您检查任何状态更新的条件，您将实现它。

请找到以下代码以及博览会链接，

export default class Update extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number:1,
      newNumber:undefined
    }
    console.log(this.state.number, 'number')
  }


  componentDidUpdate(){
    if(this.state.number != this.state.newNumber){
       alert('state is not the same')
      }
      //when I update state I should see this console log but nothing is happening.
      if(this.state.number == this.state.newNumber){
       alert('state is the same')
      }
  }



  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>
    );
  }
}

展会链接expo

希望有帮助，如有疑问请放心