[英]update the array of object in the react redux
I am new to the react-redux
. 我是
react-redux
新手。
const initialState = {
Low: [
{
id: 0,
type: '',
count: '',
allowded: 6,
level: 'EASY'
}
],
Medium: [
{
id: 0,
type: '',
count: '',
allowded: 7,
level: 'MEDIUM'
}
],
High: [
{
id: 0,
type: '',
count: '',
allowded: 7,
level: 'TOUGH'
}
]
}
This is my initial state value. 这是我的初始状态值。
After that , 之后 ,
onChange(event, tobeupdated, id, type, noc, data) {
let newData = { ...this.props.data };
if (newData) {
let data = newData[type].map((object, index) => {
if (object.id === id) {
object[tobeupdated] = event.target.value;
const tobeData = newData[type];
this.props.updateLowLevel({tobeData, type}).then(() => {
let criteria_filled = this.disableAddbutton({ ...this.props.data }, type);
addedRow = `new${type}RowAdded`;
this.setState({
[addedRow]: criteria_filled ? true : false
})
});
}
This way I am updating the object values. 这样,我就更新了对象值。 and then replacing that whole object.
然后替换整个对象。
return (dispatch) => {
dispatch({
type: QUIZ_DATA,
data: tobeUpdated,
});
return Promise.resolve();
}
}
In my reducer , 在我的减速器中
case QUIZ_DATA:
return {
...state,
[action.data.type]: [action.data.tobeData],
error: false,
}
Now,Here what is happening when I change the lets say type
then it adds that array of object to as a children to the previous array. 现在,在这里,当我更改letsay
type
时,会发生什么,然后将对象数组添加为前一个数组的子级。 so, it gets added as many as you are adding. 因此,它的添加数量与您添加的数量相同。 SO, because of that I am not able to get that render properly.
因此,因此,我无法正确获得该渲染。
So what Happens is , Low : 所以发生的是,低:
This way gets added. 这种方式被添加。 So, How Can I do this ?
那么,我该怎么做呢?
Can any one helm me with this ? 有人可以帮我吗?
Try this out as a reducer. 尝试将此作为减速器。 It spreads the content of tobeData to an array.
它将tobeData的内容传播到一个数组。
case QUIZ_DATA:
return {
...state,
[action.data.type]: [...action.data.tobeData], // the difference is here
error: false,
}
[action.data.type]: [...action.data.tobeData],
The data you passing through action.data.tobeData
(eg: [1,2,3])
is the array itself. 您通过
action.data.tobeData
传递的数据(eg: [1,2,3])
是数组本身。
So when you use [action.data.type]: [action.data.tobeData]
, this will create the array of array [[1, 2, 3]]
. 因此,当您使用
[action.data.type]: [action.data.tobeData]
,这将创建数组[[1, 2, 3]]
的数组。
You could use [action.data.type]: [...action.data.tobeData]
, this is called spread operator, all it's doing is basically copy all the element
inside action.data.tobeData
and spread it out. 您可以使用
[action.data.type]: [...action.data.tobeData]
,这称为散布运算符,它所做的基本上就是复制action.data.tobeData
内的所有element
并将其散布开。
You can refer to this document Spread syntax 您可以参考本文档Spread语法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.