REACT - 当对象不同时如何处理 props 中对象的更新

Question

我有一个关于作为 prop 传递的对象以及对此对象的更改的问题。 如果我传递缺少某些值/属性的对象，如何实现设置为默认（或某些）值？

让我解释一下。 这是简化的问题。

export const Data = {
    id: "",
    name: "",
}

export const ElementProperties = (props) => {
  const [data, setData] = React.useState(Data);

....

 React.useEffect(() => {
  setData({
      ...props.item.data
    });
  }, [props.item]);
  
  
....

<TextField name="id" label="ID" type="text" fullWidth value={data?.id} onChange={handleChange} />
<TextField name="name" label="Name" type="text" fullWidth value={data?.name} onChange={handleChange} />

现在假设我有对象 A = { id: "1" ) 和 B = {id: "2", name: "TestName"} 假设对象 A 是旧记录，而“名称”不属于其中。 假设对象 B 是在较新版本的应用程序中创建的新记录，其中添加了属性“名称”。从firebase加载的数据。

当我将对象 B 传递给 elementProperties 时，ID 和 NAME 的值按预期显示在 TextFields 中。 然后，当我传递对象 A （选择 B 之后）并且 A 没有“名称”时，该值不会被删除/替换为“”（空字符串）。先前对象的值仍显示在文本字段中。在 setData() 中似乎很合乎逻辑，我传递的数据没有该值。但是如何根据“const Data = {}”初始化为默认值呢？

我也尝试在传递道具之前设置数据。

 React.useEffect(() => {
  setData(Data);
  setData({
      ...props.item.data
    });
  }, [props.item]);

知道如何处理它而不逐个属性地删除它吗？ 真实物体有 50 多个属性。

感谢您的帮助。

尝试设置不同的值，清除它等。

Answer 1

前一个对象的值仍显示在文本字段中。

这是因为

data

对象仍然具有

name

属性。当您调用

setData

时，传入的对象将合并到具有

name

属性的旧状态值中。

这可以解决它：

setData(() => ({ ...props.item.data }));

另一方面，我会考虑甚至没有

[data, setData]

值。相反，直接访问道具。使用

data.x

代替

props.item.x

。将 props 复制到 state 中通常不是一个好主意。