Question

我需要通过单击按钮根据输出的数量更改React组件的状态。该按钮会增加一个计数器的状态。如果数字是素数，则应将isPrime状态更改为true；如果不是，则isPrime应该为false。

  class Counter extends Component {

    constructor(props) {
        super(props);
        this.state = {
          count:0,
          isPrime: false
        };
      }

checkPrime = (num) => {
    if (num === 1) return false;
    if (num === 2) return true;
    for(var i = 2; i < num; i++) {
        if(num % i === 0) {
            return false; // it isn't prime
        }
    }
    return true; //it is prime
  }

incrementItem = () => {
    this.setState((prevState, { count }) => ({
    count: prevState.count + 1
  }));
    if (this.checkPrime(this.state.count)) {
        this.setState({ isPrime: true });
    }
    else {
        this.setState({ isPrime: false });
    }
}


render() {
    return (
      <div id="mainDiv" className={this.state.isPrime ? 'bgPrime' : ''}>
        <button onClick={this.incrementItem}>Click me</button>
        {<h2>{ this.state.count }</h2> }
      </div>
    );
  }
}

export default Counter;

在crementItem函数中，无法按照建议的here使用以下语法：

    this.setState((prevState, { isPrime }) => {
            isPrime: true
     });
// ('Expected an assignment or function call and instead saw an expression  no-unused-expressions')

Answer 1

该建议执行不正确。 this article建议使用updater function，这是 first setState参数。 Updater函数接受先前状态和当前道具作为参数并返回新状态：

this.setState((prevState, props) => ({ isPrime: true }));

由于在新状态下都不使用非状态道具，因此不需要更新程序功能。如果更新是无条件的，那将是：

this.setState({ isPrime: true });

但是更新器功能的目的是防止争用情况，因为状态更新是异步的。由于state.count可能会在更新之前被访问，因此这会导致比赛条件：

this.setState((prevState, { count }) => ({
  count: prevState.count + 1
}));
if (this.checkPrime(this.state.count)) {
...

相反，两个状态更新都应该使用更新程序功能来完成，以保持执行顺序：

incrementItem = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));

  this.setState((prevState) => ({
    isPrime: this.checkPrime(prevState.count)
  }));
}

Answer 2

尝试使用此incrementItem方法：

incrementItem = () => {
  this.setState((prevState) => {
    const count = prevState.count + 1
    return { count, isPrime: this.checkPrime(count) }
  })
}

之所以应该工作，是因为count立即并同步更新，然后由this.checkPrime使用，而不是尝试在this.state.count更新之前访问setState。

根据素数检测反应集状态

2 个答案: