如何在设置对象新键前移除旧键？（React状态更新场景）

要实现修改对象键名时同时移除旧键的需求，用对象解构+扩展运算符或者分步操作都能简洁完成，不会干扰新键赋值：

方式一：简洁解构写法（一行式） #

直接通过解构移除旧键，再合并剩余属性与新键值对：

{Object.entries(environments).map(([k, v]) => (
  <input
    type="text"
    className="input-text border border-radius lightgray-background"
    value={k}
    onChange={(e) => {
      const newKey = e.target.value;
      setEnvironments({
        // 解构剔除旧键k，保留其他属性
        ...(({ [k]: _, ...rest }) => rest)(environments),
        [newKey]: v,
      });
    }}
  />
))}

方式二：分步操作（可读性更强） #

如果觉得解构写法有点绕，可以拆成三步，逻辑更清晰：

{Object.entries(environments).map(([k, v]) => (
  <input
    type="text"
    className="input-text border border-radius lightgray-background"
    value={k}
    onChange={(e) => {
      const newKey = e.target.value;
      // 复制原对象
      const updatedEnvs = { ...environments };
      // 删除旧键
      delete updatedEnvs[k];
      // 添加新键
      updatedEnvs[newKey] = v;
      setEnvironments(updatedEnvs);
    }}
  />
))}

优化：避免无效状态更新 #

如果用户输入的新键和旧键完全一致，没必要触发状态更新，可以加个判断跳过：

onChange={(e) => {
  const newKey = e.target.value;
  if (newKey === k) return; // 键名未变化时直接返回
  const updatedEnvs = { ...environments };
  delete updatedEnvs[k];
  updatedEnvs[newKey] = v;
  setEnvironments(updatedEnvs);
}}

内容的提问来源于stack exchange，提问作者János