[英]Assign value to State object key of another key's value in React js
I am trying to check whether sum of three numbers is equal if yes then i want to update the state. 我正在尝试检查三个数字的总和是否相等,如果是,那么我想更新状态。
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
}
But when i try to use {this.state.proposedAnswer}
i will get NAN ? 但是当我尝试使用
{this.state.proposedAnswer}
我会得到NAN吗? Any help please ? 有什么帮助吗?
You can't refer to a property of an object before initializing it... perhaps something like this would work in your case? 您不能在初始化对象之前引用对象的属性……也许在您的情况下会起作用?
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);
What you are doing wrong is that you that not accessing those variables by state. 您做错的是您没有按状态访问这些变量。 Instead you should do this:
相反,您应该这样做:
state = {
number1 : Math.floor(Math.random() * 100),
number2 : Math.floor(Math.random() * 100),
number3 : Math.floor(Math.random() * 100),
proposedAnswer : ''
}
Since the state is initialized, now we can define a function to calculate the sum. 由于状态已初始化,因此我们现在可以定义一个函数来计算总和。
sum = () => {
this.setState ({
proposedAnswer: Math.floor(Math.random() * 3) + this.state.number1 + this.state.number2 + this.state.number3
)}
}
The this
in your code does not refer to anything, so you are summing undefined
to a number and then get NaN
. 您的代码中的
this
并未引用任何内容,因此您将undefined
求和为一个数字,然后得到NaN
。
You could use the callback version of setState in which you pass a function which takes a state and return a new state. 您可以使用setState的回调版本,在该版本中,您可以传递一个接受状态并返回新状态的函数。 Inside a PureComponent you can write this function so that if some test is true you return the old state.
在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;
})
Note that I would not recommend this pattern as your update function is not a pure function
. 请注意,由于您的更新功能不是
pure function
,因此我不建议您使用此模式。 If you can add any detail as to your current use case maybe I can elaborate on which pattern could be desirable. 如果您可以添加有关当前用例的任何详细信息,也许我可以详细说明哪种模式是理想的。
You should update your state inside setState method. 您应该在setState方法中更新状态。 Here is a sample-
这是一个示例-
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);
}
You can call the calculateSum method inside your render method for any input text or div. 您可以为任何输入文本或div调用render方法内的computeSum方法。 Let me know if this helps.
让我知道是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.