React中基于前序状态生成键值匹配新state对象的方法

你之前用Object.assign得不到正确结果，本质是两个核心问题：一是Object.assign仅做平面对象属性合并，不会自动完成原有键的偏移操作；二是如果合并顺序写反，旧对象的0:400会直接覆盖你预设的0:undefined，完全达不到预期。

正确实现逻辑 #

• 遵循React不可变数据原则，不直接修改原state上的对象，生成全新对象作为新state
• 先给新对象设置0: undefined，对应新增列的默认值
• 遍历原对象所有键值对，将键转为数字后加1，对应值原样写入新对象，保证原有列的取值和位置一一对应

代码实现如下，推荐放在setState的updater函数中执行，避免state异步更新导致的取值错误：

this.setState(prevState => {
  const newStateObject = { 0: undefined };
  Object.entries(prevState.stateObject).forEach(([key, val]) => {
    newStateObject[Number(key) + 1] = val;
  });
  return { stateObject: newStateObject };
});

效果验证 #

传入原始对象stateObject = {0: 400, 1: 500, 2: 600}时，上述逻辑执行后得到的新对象完全符合预期：

newStateObject = {0: undefined, 1: 400, 2: 500, 3: 600}

注意事项 #

• 不要在componentWillUpdate生命周期中调用setState，这个API在React 16.3后已被标记为不安全，容易触发重复渲染、死循环问题。如果是响应列新增的逻辑，建议直接在触发新增列的事件（比如用户操作、props变更回调）中执行上述state更新，需要派生状态的场景优先使用static getDerivedStateFromProps。
• 不要直接修改原state对象的键，比如直接遍历原对象把键改成+1，会破坏React的状态对比逻辑，导致渲染异常。

内容的提问来源于stack exchange，提问作者andrew kim