通过数组映射并使用reducer React更新每个状态

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

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