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

Question

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

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 将 return 一个数组。根据您的示例，您似乎需要动态创建一个对象。您可以将 reduce 与扩展运算符一起使用：

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

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

Update state with dynamically constructed object using reducers in React

reducers

reactjs

react-hooks