Javascript 对象数组上的Setstate使映射崩溃
我试图通过索引更新数组中第一个对象的状态。 这样做的原因是为了了解如何更新数组中的特定对象 更新状态后,我将收到以下错误:Javascript 对象数组上的Setstate使映射崩溃,javascript,reactjs,Javascript,Reactjs,我试图通过索引更新数组中第一个对象的状态。 这样做的原因是为了了解如何更新数组中的特定对象 更新状态后,我将收到以下错误: Uncaught TypeError: this.state.users.map is not a function 因此,当我尝试更新阵列时,可能是做错了什么 我想在第一次单击按钮时通过id或索引更新第一个用户 国家: this.state = { users: [ {
Uncaught TypeError: this.state.users.map is not a function
因此,当我尝试更新阵列时,可能是做错了什么
我想在第一次单击按钮时通过id或索引更新第一个用户
国家:
this.state = {
users: [
{
"id" : 1,
"name": "My Name",
"age": 15
},
{
"id" : 2,
"name": "Joe",
"age": 35
},
]
};
和渲染功能:
render() {
return (
<div>
{this.state.users.map((item, index) =>
<div>
<div className="col-12">
<label name="id" value={item.id}>{item.id}</label>
<input name="name" value ={item.name} text={item.name}/>
<input name="name" value ={item.age} text={item.age}/>
</div>
</div>
)}
<button onClick={(e) => this.updateInput(e)}>Update</button>
</div>
);
}
updateInput = e => {
var newUser = {
"id" : 1,
"name" : "NEW NAAME",
"age" : 99
};
console.log(newUser);
this.setState(prevState => ({
users: {
...prevState.users,
[prevState.users[0]]: { newUser }
}
}));
};
我的JSFIDLE示例:
首先,应使用数组扩展语法[…]而不是{…},然后如果要更新该数组的第一个元素,应执行以下操作:
updateInput = e => {
const newUser = {
id: 1,
name: "NEW NAME",
age: 99
};
console.log(newUser);
this.setState(prevState => ({
users: Object.assign([], prevState.users, { 0: newUser })
// '0' because the index of the first element is 0.
// You can also use Object.assign([...prevState.users], { 0: newUser })
}));
};
您需要用户:[……]数组有方括号;您正在创建一个对象,而不是this.setStateprevState=>{users:prevState.users.mapuser=>user.id==newUser.id?newUser:user};当然,现在我觉得自己很愚蠢。非常感谢你的帮助!谢谢你的帮助。你和Chris G的评论都帮了我的忙@arkhz-很乐意帮忙。如果你想根据id和我的基于索引的id进行更新,请遵循Chris g的答案。是的,请记住这一点。将此作为答案,我觉得你和Chris g都帮助了我!