将数组项添加到对象键的有效方法

Question

我有一个来自服务器的值。它包含与我的状态对象具有相同键的对象。该对象的键值是一个包含一项的数组。要在我的 reducer 中处理这个值，我需要将此数组项添加到我状态中的现有对象键中。

简而言之：

我有来自服务器的：{ TEST: ['item1'] }

我的状态是：{ TEST: ['item2'], TEST2: ['item3'] }

预期结果：{ TEST: ['item1', 'item2'], TEST2: ['item3'] }

const handleCreateItemFilter = (state, { payload }) => {
  const { list  } = payload;
  const updatedList = { ...state.regions.list };
  updatedList[Object.keys(list).join()] = [...updatedList[Object.keys(list).join()], Object.values(list).join()];
  return {
    ...state,
    regions: {
      ...state.regions,
      list: updatedList,
    },
    selectedFilter: {
      ...state.selectedFilter, unassignedCountries: [], regions: Object.keys(list).join(),
    },
  };
};

目前，我像上面的示例一样解决了它：创建新的 updatedList，从服务器中为我的对象找到合适的键，并将旧键值和新键值分配给我的新对象数组。但我认为这不是解决这个问题的好方法。

Answer 1

所以，我真的不知道你为什么在根状态上使用对象而不是数组，但是，如果我需要使用它，我会这样做：

const response = { TEST: ['item1'] }
const stateInitial = { TEST: ['item2'], TEST2: ['item3']}

const expected = JSON.stringify({ TEST: ['item1', 'item2'], TEST2: ['item3']})

const reducer = (state = stateInitial, { payload }) => {
  return [
    ...Object.entries(payload).map(([k, v]) => (
      typeof stateInitial[k] !== 'undefined' ?
      [ k,[...v, ...stateInitial[k],]] :
      [k, v]
    ))

  ].reduce((obj, [k, v]) => ({ ...obj, [k]: v }), stateInitial)
};


try {
  const output = JSON.stringify(reducer(undefined, { payload: response}))
  if (output != expected) {
    throw `reducer return something different: \n${output} \n\nand expect \n\n${expected}`
  }

  console.log('the test is passed')
} catch (error) {
  console.error(error)
}