Question

在React中，我有一个按钮，单击该按钮会将状态对象的值减1。当状态值减小到0时，它应该激活警报方法，但是由于某种原因，它仅在状态值1达到-1而不是0时才激活。有帮助吗？

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  constructor(props){
    super(props);

    this.state = {

      numbers:{
        one:1
      },

    };

  }


  decrement = () => {
    this.setState(prevState => {
      return {
        numbers:{
          ...prevState.numbers,
          one: prevState.numbers.one - 1
        }

      }
    }, () => console.log(
            this.state.numbers.one,

      ));

      if(this.state.numbers.one===0){
        alert('test');
       }

  }

  render() {


    return (
      <div className="App">
         <div>{this.state.numbers.one}</div> 

          <br/>
          <button onClick={this.decrement}>ok</button>     
      </div>
    );
  }
}

export default App;

Answer 1

就像我在评论中说的那样。 setState是异步的，您需要等待状态更改或使用生命周期方法。

因此，在递减函数中，您可以在已使用的回调中发出警报，该回调中具有更新的状态值。

decrement = () => {
  this.setState(prevState => {
    return {
      numbers:{
        ...prevState.numbers,
        one: prevState.numbers.one - 1
      }
    }
  }, () => {
    console.log(this.state.numbers.one) 
    if(this.state.numbers.one===0){
      alert('test');
    }
  });
}

或者，您可以使用componentDidUpdate生命周期方法来检查该值

componentDidUpdate(prevProps, prevState) {
  if (prevState.numbers.one > 0 && this.state.numbers.one === 0) {
    alert('test');
  }
}

Answer 2

由于setState是异步的，因此您需要在setState的回叫中添加警报。

class App extends Component {  
    constructor(props){
      super(props);    
      this.state = {    
          numbers:{
            one:1
          },    
      };    
    }

    decrement = () => {
        this.setState(prevState => {
            return {
                numbers:{
                    ...prevState.numbers,
                    one: prevState.numbers.one - 1
                }    
            }
        }, 
        () => {
            console.log(this.state.numbers.one)    
            if(this.state.numbers.one===0){
                alert('test');
            }
        });    
    }

    render() {        
        return (
            <div className="App">
                <div>{this.state.numbers.one}</div>     
                <br/>
                <button onClick={this.decrement}>ok</button>     
            </div>
        );
    }
}

export default App;

Answer 3

您可以实现以下减量功能

decrement = () => {
    this.setState({numbers: { ...this.state.numbers, one: this.state.numbers.one -1} },
        () => {
            this.state.numbers.one===0 && alert("test")
        }
    )

}

反应if语句未显示结果

3 个答案: