Javascript 用React猜测数字-在这种情况下，使用state的正确方法是什么

我的React客户端应用程序应该猜出1到10000之间的密码。这是我的密码：

import axios from 'axios';
import React, { Component } from 'react';

class GuessEngine extends Component {
  constructor(props) {
    super(props);

    this.state = {
      number: null,
      result: null,
    };
  }

  componentDidMount() {
    const firstGuess = 5000;
    axios
      .post('http://localhost:3001/number', {
        isNumber: firstGuess,
      })
      .then(response => {
        const { resultCode } = response.data;
        this.setState({ number: firstGuess });
        this.setState({ result: resultCode });
      })
      .catch(error => console.log(error));
  }

  componentDidUpdate(prevProps, prevState) {

    if (prevState !== this.state) {
      if (this.state.result === 'lower') {
        const newNumber = this.state.number - 1;
        axios.post('http://localhost:3001/number', {
          isNumber: newNumber,
        });
        this.setState({ number: newNumber });
      }

      if (this.state.result === 'higher') {
        const newNumber = this.state.number + 1;
        axios.post('http://localhost:3001/number', {
          isNumber: newNumber,
        });
        this.setState({ number: newNumber });
      }

      if (this.state.result === 'success') {
        console.log(`Success! The secret number is ${this.state.number}!`);
      }
    }
  }

  render() {
    return <div>Test</div>;
  }
}

export default GuessEngine;

---

此代码不比较

This.state.number！==prevState.number

，但仅以这种方式，我强制它工作

设置状态

将导致更新，因此您的

组件diddupdate

将被反复调用：

componentDidUpdate(prevProps, prevState) { 
  // after each update this will be true and further runing another updates
  if (prevState !== this.state) {  
  }
}

---

您需要更好的逻辑来解释是否需要进行更新。这意味着在某个时刻，

componentdiddupdate

不应该做任何事情。

setState

将导致更新，因此您的

componentdiddupdate

将被反复调用：

componentDidUpdate(prevProps, prevState) { 
  // after each update this will be true and further runing another updates
  if (prevState !== this.state) {  
  }
}

---

您需要更好的逻辑来解释是否需要进行更新。这意味着在某一点上，组件diddupdate不应执行任何操作。

每次启动组件did update时，您都在设置状态。。而不是等待来自请求的回调来查看其值是低还是高

此外，还应该将状态转换的逻辑放入更好的条件中

const nextNum = { lower: -1, higher: 1 } // simple mapping of the next guess so you can reduce amount of code
componentDidUpdate(prevProps, prevState) {
    if (this.state.result && this.state.number !== prevState.number) {
        if (nextNum[this.state.result]) {
            // make request with the number
             const newNumber = nextNum[this.state.result]
             axios.post('http://localhost:3001/number', {
                 isNumber: newNumber,
             }).then(response => {
                 const { resultCode } = response.data;
                 this.setState({result: resultCode, number: newNumber})
             }).catch(error => console.log(error));
        } else if (this.state.result === 'success') {
            console.log(`Success! The secret number is ${this.state.number}!`);
        }
    }
}

---

请注意，这里的关键问题是，您只应在请求返回后设置state。。否则你就会没完没了地说。。因为

此.state.result

永远不会更新为success

每次启动组件确实更新时，您都在设置状态。。而不是等待来自请求的回调来查看其值是低还是高

此外，还应该将状态转换的逻辑放入更好的条件中

const nextNum = { lower: -1, higher: 1 } // simple mapping of the next guess so you can reduce amount of code
componentDidUpdate(prevProps, prevState) {
    if (this.state.result && this.state.number !== prevState.number) {
        if (nextNum[this.state.result]) {
            // make request with the number
             const newNumber = nextNum[this.state.result]
             axios.post('http://localhost:3001/number', {
                 isNumber: newNumber,
             }).then(response => {
                 const { resultCode } = response.data;
                 this.setState({result: resultCode, number: newNumber})
             }).catch(error => console.log(error));
        } else if (this.state.result === 'success') {
            console.log(`Success! The secret number is ${this.state.number}!`);
        }
    }
}

---

请注意，这里的关键问题是，您只应在请求返回后设置state。。否则你就会没完没了地说。。因为

this.state.result

永远不会更新为success

setState

会触发更新，所以请将它放在错误中提到的地方以外的任何其他地方。@jmargolisvt，但我需要测试多个案例，所以它应该在考虑状态更改后再做一次测试。你知道我还能把它放在哪里吗？@jmargolisvt那不是真的。。setState可以而且可能应该在did更新中更改数据。。你只需要聪明地知道你怎么称呼它。。。例如，在他的回答中，他总是设置状态，而不是等待请求回调。。也就是说，当他猜对了数字时，他从不改变自己的结果来获得成功。。如果您等待请求回调设置状态，则可以。

setState

会触发更新，因此请将其放置在错误中提到的位置之外的任何其他位置。@jmargolisvt，但我需要测试多个案例，因此它应该在考虑状态更改后再进行一次测试。你知道我还能把它放在哪里吗？@jmargolisvt那不是真的。。setState可以而且可能应该在did更新中更改数据。。你只需要聪明地知道你怎么称呼它。。。例如，在他的回答中，他总是设置状态，而不是等待请求回调。。也就是说，当他猜对了数字时，他从不改变自己的结果来获得成功。。如果您等待请求回调以设置状态，则可以。您的意思是

如果（this.state.result&&this.state.number！==prevState.number）

？由于this.state.result对于4000次猜测可能是相同的，因此它只响应“lower”或“higher”您的意思是

如果（this.state.result&&this.state.number！==prevState.number）

？因为对于4000次猜测，this.state.result可能是相同的，所以它只响应“lower”或“higher”