这是我的应用程序结构
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].available 的属性以匹配 silo_1Lookup() 函数内部的内容。
例如,如果用户输入 5,则 silos[0].available 应设置为“595”
if (silos[0].userInput === '5') {
return silos[0].available = "595"
}
有点像那样,但是使用 silo_1Lookup() 内的字典;
目前,该函数正在运行,但 silos[0].available 并未使用新值进行更新,并且没有错误消息
最佳答案
更改可用
值后,您不会更新状态。
在您的函数中,进行所需的更改后调用 setState()
。
您正在使用silos
来显示userInput
和available
。因此,更新silos
会改变 View ,而不是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>
);
})}
关于javascript - 更改对象属性以匹配给定数组中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57898366/