这是我的应用程序结构
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>
);
})}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句