在 React 中使用 reducers 使用动态构造的对象更新状态

Question

我有一个值数组，它们在状态中设置为布尔值。我需要遍历数组并将每个值设置为有效负载（真）。下面的代码可以正常工作，但我正在寻找一种方法来实现任意数量的相同结果。

criticals = ["critical-1-524", "critical-4-572", "critical-15-24", "critical-30-48"]

return {
      ...state,
      mapboxToggleLayers: {
        ...state.mapboxToggleLayers,
        [criticals[0]]: action.payload,
        [criticals[1]]: action.payload,
        [criticals[2]]: action.payload,
        [criticals[3]]: action.payload
      }
    }

这是我的工作版本，但这会删除它的状态对象中的所有值。

return {
  ...state,
  mapboxToggleLayers: {
    ...state.mapboxToggleLayers
    [criticals.map(el => {
      let critObj = {}
      return critObj[`${el}`] = action.payload
    })]
  }
}

Answer 1

问题是criticals.map 将返回一个数组。根据您的示例，您似乎需要动态创建一个对象。您可以将reduce 与展开运算符一起使用：

return {
  ...state,
  mapboxToggleLayers: {
    ...state.mapboxToggleLayers,
    ...criticals.reduce((result, key) => {
      return {...result, [key]: action.payload}
    }, {})
  }
}