React中动态更新嵌套对象时保留原有键的问题

你的问题出在更新嵌套对象时，没有保留原嵌套对象的已有属性——当前代码里直接用{[name]: value}替换了整个form[object]对象，自然会删掉task、other这些原有键。要保留嵌套对象的其他属性，你需要展开原嵌套对象的所有属性，再覆盖需要更新的键。

修改后的handleForm函数如下：

const handleForm = (name, value, type, object) => {
  if (object) {
    // 先展开外层form，再展开目标嵌套对象的原有属性，最后覆盖指定键
    setForm({
      ...form,
      [object]: {
        ...form[object], // 展开原嵌套对象，保留原有键值
        [name]: value
      }
    });
  } else {
    setForm({ ...form, [name]: value });
  }
};

关键说明： #

• 当需要更新嵌套对象时，...form[object]会把原嵌套对象（比如form.info）的所有属性都复制过来，再用[name]: value覆盖需要更新的键，这样就不会丢失task、other这些原有属性了。
• 你之前的思路方向是对的，但不是用...object（因为object是字符串类型的键名，比如'info'），而是要用...form[object]来获取并展开对应的嵌套对象。

完整可运行示例： #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [form, setForm] = useState({});

  useEffect(() => {
    const obj = {
      id: 1,
      info: { information: 1, task: 2, other: 3 }
    };
    setForm(obj);
  }, []);

  const handleForm = (name, value, type, object) => {
    if (object) {
      setForm({
        ...form,
        [object]: {
          ...form[object],
          [name]: value
        }
      });
    } else {
      setForm({ ...form, [name]: value });
    }
  };

  return (
    <input
      value={form.info?.information} // 用可选链避免初始空状态下的报错
      onChange={(e) => handleForm('information', e.target.value, false, 'info')}
    />
  );
};

export default YourComponent;

额外提醒：初始状态form是空对象，直接访问form.info.information会触发报错，建议用可选链form.info?.information做安全访问。

内容的提问来源于stack exchange，提问作者Jack The Baker