如何将状态传播到特定数组中

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 函数时用新名称更新一些现有状态。这应该传播现有状态并从项目 [0].data 中获取特定状态，向其添加新名称但我似乎无法让它工作。

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

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

Answer 1

拆分 return 可能更容易。复制状态，创建一个对象，然后将其添加到 data 数组，保留其中已有的所有对象。然后return副本更新状态。

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)
]

如何将状态传播到特定数组中

How to spread state into a specific array

javascript

react-native

react-context