如何仅复制对象中useState已声明的属性到目标useState状态

当前代码直接合并data对象时，会把data中不属于初始userData的属性（比如village）也混入结果里，要实现只保留userData原有声明的属性，可通过以下几种方式解决：

方法一：基于现有state的键过滤属性 #

修改useEffect中的状态更新逻辑，遍历原有userData的键，仅提取data中对应键的属性：

useEffect(() => {
  setUserData((pre) => {
    const filteredData = Object.fromEntries(
      Object.keys(pre).map(key => [key, data[key]])
    );
    return { ...pre, ...filteredData };
  });
}, []);

通过Object.keys(pre)获取原有状态的所有键，再从data中提取对应值并重组为新对象，最后和原有状态合并，避免混入额外属性。

方法二：复用初始state模板 #

将初始状态抽离为独立变量，基于这个模板的键来过滤data，后续修改状态结构时无需调整过滤逻辑：

const SellDashBoard = () => {
  const initialUserData = {
    name: '',
    age: '',
    number: '',
  };
  const[userData, setUserData] = useState(initialUserData);

  const data = {
    name: 'Ram',
    age: '21',
    village: 'pithawaiaya'
  };

  useEffect(() => {
    setUserData((pre) => {
      const filteredData = Object.fromEntries(
        Object.keys(initialUserData).map(key => [key, data[key]])
      );
      return { ...pre, ...filteredData };
    });
  }, []);

  return (
    <div>
      
    </div>
  );
};

方法三：手动提取目标属性（适合属性较少的场景） #

如果userData的属性数量不多，直接解构data中需要的属性进行合并，逻辑更直观：

useEffect(() => {
  setUserData((pre) => {
    const { name, age } = data;
    return { ...pre, name, age };
  });
}, []);

内容的提问来源于stack exchange，提问作者ram pratap singh