如何将状态扩展到特定的数组中

Question

我有一个对象数组，当某个函数被调用时，我想用新数据更新该对象数组中的特定数组。

呼叫:

const DataReducer = (state, action) => {
switch (action.type) {
case 'ADD_DATA':
return [...state, state[0].data:[...state, {id: Math.floor(Math.random() * 999),
name: action.payload.name,
}]];
}
}

问题是我不断得到一个错误"'，'预期"，这出现在:数据后我很确定这是正确的，虽然，我使用上下文api来更新一些现有的状态与新名称，当addName函数被调用。这将传播现有状态，并从item[0]中获取特定状态。数据，添加新的名称，但我似乎不能得到它的工作。

如有任何帮助，不胜感激。

原始数据对象:[{title: 'Names', data: []}, {title: 'Meal', data: []}]

Answer 1

拆分返回可能更容易。复制状态，创建一个对象，并将其添加到data数组中，保留已经存在的任何对象。然后返回副本以更新状态。

const DataReducer = (state, action) => {
const { type, payload } = action; 
switch (type) {
case 'ADD_DATA': {
const copy = [...state];
copy[0] = {
...copy[0], 
data: [
...copy[0].data, {
id: Math.floor(Math.random() * 999),
name: 'Bob'
}
]
};
return copy;
}
}
}
const state = [{title: 'Names', data: []}, {title: 'Meal', data: []}];
const newState = DataReducer(state, { type: 'ADD_DATA', payload: { name: 'Bob' } });
console.log(newState);

Answer 2

return [
{ 
...(state[0] || {}),
data: {
id: Math.floor(Math.random() * 999),
name: payload.name
} 
},
...state?.slice?.(1)
]