[英]change object property to match values in given array
这是我的应用程序结构
Codepen示例: https ://codesandbox.io/s/awesome-blackwell-kd3nn
class MasterForm extends Component {
constructor() {
super();
this.state = {
userInput: "",
available: "",
silos: []
};
}
handleFormSubmit = e => {
e.preventDefault();
this.silo_1Lookup();
};
handleInputChange = e => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({
[name]: value
});
};
silo_1Lookup = () => {
let silos = [...this.state.silos];
silos.push({
userInput: this.state.userInput,
available: this.state.available
});
this.setState({
silos,
userInput: "",
available: ""
});
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
console.log("function ran");
return siloDepthFilling[silos[0].userInput];
};
}
我正在尝试更改silos [0]的属性。该属性可匹配silo_1Lookup()函数内部的内容。
例如,如果用户输入5,则silos [0] .available应该设置为“ 595”
if (silos[0].userInput === '5') {
return silos[0].available = "595"
}
有点像,但是在silo_1Lookup()中使用了字典;
目前,该函数正在运行,但是silos [0] .available没有用新值更新,并且没有错误消息
更改available
值后,您不会更新状态。
在您的函数中,进行必要的更改后调用setState()
。
您正在使用silos
同时显示userInput
和available
。 因此更新silos
是改变视图的原因,不可available
。
silo_1Lookup = () => {
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
console.log("function ran");
let available = siloDepthFilling[this.state.userInput];
let silos = [...this.state.silos];
silos.push({
userInput: this.state.userInput,
available: available
});
this.setState(
{
silos: silos,
available: available
}
);
};
另外,您没有将key
用于列表项,并且会引发错误。 对Table
组件进行以下更改。
{silos.map((silo, i) => {
return (
<tr key={i.toString()}>
<td>{silo.userInput}</td>
<td>{silo.available}</td>
</tr>
);
})}
问题的根本原因是,每当您的阵列silos[]
获得available
的新值时,您都需要更新。 因此,方法如下。
handleInputChange = e => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({
[name]: value
});
};
silo_1Lookup = () => {
let silosss = [...this.state.silos];
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
// Push user input and available value in array
silosss.push({
userInput: this.state.userInput,
available: siloDepthFilling[this.state.userInput]
});
// Finally update the state of both array and available value
for(var item of silosss){
this.setState({
silos:silosss,
available: item.available
});
}
};
最后,输出应该是这样的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.