Javascript 反应本机：更新状态，然后与addListener检查

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

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

addListener

不会更新

我想当我更新我的状态时，应该看到

console.log（'state is 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>
    );
  }
}

导出默认类更新扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
编号：1，
newNumber：未定义
}
console.log（this.state.number，“number”）
}
componentDidMount（）{
this.props.navigation.addListener（'willFocus'，（）=>{
//当屏幕加载时，我得到这个控制台。
if（this.state.number！=this.state.newNumber）{
console.log（'状态不相同'）
}
//当我更新状态时，我应该看到这个控制台日志，但什么都没有发生。
if（this.state.number==this.state.newNumber）{
console.log（'状态相同'）
}
})
}
render（）{
返回(
this.setState（{newNumber:1}，（）=>console.log（this.state.newNumber，'newNumber'））}/>
);
}
}

基本上，您试图实现的是检查一次单击按钮，是否设置了一个新闻状态，您想检查现有的新闻状态，它是否正确更新

---

因此，您使用的是

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

导出默认类更新扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
编号：1，
newNumber：未定义
}
console.log（this.state.number，“number”）
}
componentDidUpdate（）{
if（this.state.number！=this.state.newNumber）{
警报（'状态不相同'）
}
//当我更新状态时，我应该看到这个控制台日志，但什么都没有发生。
if（this.state.number==this.state.newNumber）{
警报（'状态相同'）
}
}
render（）{
返回(
this.setState（{newNumber:1}，（）=>console.log（this.state.newNumber，'newNumber'））}/>
);
}
}

世博链接

---

希望有帮助，不要有任何疑问

基本上，你想要实现的是检查一下按钮，是否有一个设置好的新闻状态，你想检查一下现有的新闻状态，它是否正确更新

---

因此，您使用的是

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

导出默认类更新扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
编号：1，
newNumber：未定义
}
console.log（this.state.number，“number”）
}
componentDidUpdate（）{
if（this.state.number！=this.state.newNumber）{
警报（'状态不相同'）
}
//当我更新状态时，我应该看到这个控制台日志，但什么都没有发生。
if（this.state.number==this.state.newNumber）{
警报（'状态相同'）
}
}
render（）{
返回(
this.setState（{newNumber:1}，（）=>console.log（this.state.newNumber，'newNumber'））}/>
);
}
}

世博链接

---

希望有帮助，不要有任何疑问

您的代码无法工作的原因是您希望侦听状态更改，但您的侦听器只侦听导航更改，而导航更改仅在屏幕聚焦时触发

要检测类组件中状态的更改，您可以始终使用react的生命周期，即

componentdiddupdate

你能做的也许就是这样

导出默认类更新扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
编号：1，
newNumber:null
}
console.log（this.state.number，“number”）
}
componentDidMount（）{
这个。检查（）
}
componentDidUpdate（prevState）{
if（prevState.newNumber！==this.state.newNumber）{
这个。检查（）
}
}
检查=（）=>{
if（this.state.number！=this.state.newNumber）{
console.log（'状态不相同'）
}否则{
console.log（'状态相同'）
}
}
render（）{
返回(
this.setState（{newNumber:1}，（）=>console.log（this.state.newNumber，'newNumber'））}/>
);
}
}

您的代码无法工作的原因是，您希望侦听状态更改，但您的侦听器只侦听导航更改，而导航更改仅在屏幕聚焦时触发

要检测类组件中状态的更改，您可以始终使用react的生命周期，即

componentdiddupdate

你能做的也许就是这样

导出默认类更新扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
编号：1，
newNumber:null
}
console.log（this.state.number，“number”）
}
componentDidMount（）{
这个。检查（）
}
componentDidUpdate（prevState）{
if（prevState.newNumber！==this.state.newNumber）{
这个。检查（）
}
}
检查=（）=>{