反应更新嵌套对象状态

Question

在我的一个 React 项目中，我的初始状态如下：

 const initialValues = {
    en: {
      notificationTitle: "",
      notificationSubTitle: "",
    },
    hi: {
      notificationTitle: "",
      notificationSubTitle: "",
    },
    webUrl: "",
  };

  const [formData, setFormData] = useState(initialValues);

我将此状态作为道具传递给子组件，我将它们用作像这样的选项卡

{selectedTab === "EnNotification" ? (
        <EnNotification
          formData={formData}
          setFormData={setFormData}
        />
      ) : (
        <HiNotification
          formData={formData}
          setFormData={setFormData}
        />
      )}

当我在一个选项卡中输入数据时假设在 EnNotification 选项卡中状态更新但是当我尝试切换选项卡时它给我以下错误：

TypeError: Cannot read properties of undefined (reading 'notificationTitle')

我的输入组件看起来像：

 <Input
          value={formData.en.notificationSubTitle || ""}
          placeholder="Notification Sub Title"
          onChange={(event) => {
            const tempval = event.target.value;
            setFormData((data) => ({
              en: { ...data.en, notificationSubTitle: tempval },
            }));
          }}
        />

我认为问题出在我能够更新状态的只有一个组件，但我希望它应该从两个组件更新。

谢谢。

Answer 1

更新 formData 状态时，在替换对象 en 之前，您还应该复制当前状态的其余值。试试这个：

setFormData((data) => ({
 ...data,
 en: { ...data.en, notificationSubTitle: tempval },
}));

反应更新嵌套对象状态

React update nested object state

reactjs

use-state