[英]How to update value of a specific key in array of objects in react state?
I'm creating a user role management form like this: 我正在创建这样的用户角色管理表单:
Whenever the user checks or unchecks a permission, I'm trying to put that in the state so that I can send it to my backend server and update the DB. 每当用户选中或取消选中权限时,我都试图将其置于状态,以便可以将其发送到后端服务器并更新数据库。
I'm storing all the rows info in the state in componentWillReceiveProps
: 我将所有行信息都存储在
componentWillReceiveProps
状态中:
componentWillReceiveProps(nextProps){
if(nextProps.users.items){
this.setState({
userobj : nextProps.users.items['users']
});
const userarr = []
nextProps.users.items['users'].map((i) => {
userarr.push({"employeeid" : i['employeeid'] , "isadmin": i['isadmin'], "isreports" : i['isreports'], "ischarts": i['ischarts'], "ischathistory": i['ischathistory']})
});
this.setState({"list" : userarr});
}
}
Now the state is: 现在的状态是:
list: Object(4)
0: Object { employeeid: "12345", isadmin: false, isreports: true, … }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
There is an onClick
event for each checkbox: 每个复选框都有一个
onClick
事件:
<Table.Td>{rows['isadmin'] ? <Checkbox id={rows['employeeid']} name="isadmin" defaultChecked onChange={this.handleChange}></Checkbox> : <Checkbox id={rows['employeeid']} name="isadmin" onChange={this.handleChange}></Checkbox>}</Table.Td>
And this is the code for handleChange
: 这是
handleChange
的代码:
handleChange(id) {
const checked = id.target.checked;
const empid = id.target.id;
const name = id.target.name;
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
}
The result is: 结果是:
list: Object(4)
0: Object { isadmin: true }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
What I need to achieve is: 我需要实现的是:
list: Object(4)
0: Object { employeeid: "12345", isadmin: true, isreports: true, … }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
I'm new to React and Redux. 我是React和Redux的新手。 Any help is appreciated.
任何帮助表示赞赏。 Thanks in advance.
提前致谢。 ☺
☺
Replace this: 替换为:
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
With this: 有了这个:
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState.list[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
try updating your handleChange method to this 尝试将您的handleChange方法更新为此
handleChange(id) {
const checked = id.target.checked;
const empid = id.target.id;
const name = id.target.name;
this.setState(prevState => ({
let list = prevState.list
let user = prevState.list.filter(user => user.employeeid == id)
const userIndex = prevState.list.indexOf(user)
user = {
...user,
isadmin: true
}
list.splice(userIndex, 1) //remove the old user
list.splice(userIndex, 0, user) //put the updated user at same index
this.setState({list})
}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.