[英]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.