Question

我正在尝试检查三个数字的和是否相等，如果是，那么我想更新状态。

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer : Math.floor(Math.random() * 3) + this.number1 + this.number2 + this.number3
}

但是当我尝试使用{this.state.proposedAnswer}时，我会得到NAN吗？有什么帮助吗？

Answer 1

您不能在初始化对象之前引用它的属性……也许在您的情况下这样的事情会起作用？

let number1 = Math.floor(Math.random() * 100);
let number2 = Math.floor(Math.random() * 100);
let number3 = Math.floor(Math.random() * 100);

this.state = {
    number1,
    number2,
    number3,
    proposedAnswer : Math.floor(Math.random() * 3) + number1 + number2 + number3
}

console.log(this.state);

Answer 2

您做错了是您没有按状态访问这些变量。相反，您应该这样做：

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer : ''
}

由于状态已初始化，现在我们可以定义一个函数来计算总和。

sum = () => {
  this.setState ({
    proposedAnswer:  Math.floor(Math.random() * 3) + this.state.number1 + this.state.number2 + this.state.number3
  )}
}

Answer 3

代码中的this并没有引用任何内容，因此您将undefined求和为一个数字，然后得到NaN。

您可以使用setState的回调版本，在该版本中，您传递一个带有状态并返回新状态的函数。在PureComponent内部，您可以编写此函数，以便在某些测试为真时返回旧状态。

this.setState((state) => {
  const number1 = Math.floor(Math.random() * 100);
  const number2 = Math.floor(Math.random() * 100);
  const number3 = Math.floor(Math.random() * 100);
  const proposedAnswer : Math.floor(Math.random() * 3) + number1 + number2 + number3

  if (proposedAnswer ...) {
    // return a new state
  }
  // in the default case you return the old state unchanged
  return state;
})

请注意，由于您的更新功能不是pure function，因此我不建议您使用此模式。如果您可以添加有关当前用例的任何详细信息，也许我可以详细说明哪种模式是理想的。

Answer 4

您应该在setState方法中更新状态。这是一个示例-

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer: ''
}

calculateSum = () => {
  this.setState ({
    proposedAnswer:  Math.floor(Math.random() * 3) + this.state.number1 + this.state.number2 + this.state.number3
 )}
 console.log(state);
}

您可以在渲染方法内部为任何输入文本或div调用calculateSum方法。让我知道是否有帮助。

在React js中为另一个键值的State对象键分配值

4 个答案: