Reactjs useEffect导致父组件中的状态被覆盖

我试图实现一个向导，其中每个步骤都将进行rest调用以更新对象。我有一个

ParentComponent

，它保存以

ChildComponent

格式更改的数据。我发现了一个

useffect

用例，当组件将卸载时将调用该用例（前一个：

componentWillUnmount

函数）：

通过在

useffect

中添加一个

（）=>

，我应该可以获得与

组件卸载相同的效果

我的父组件存储表单的数据：

import React from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [childKilled, setChildKilled] = React.useState(false);
  const [name, setName] = React.useState({ name: "" });
  const [firstName, setFirstName] = React.useState({ firstName: "" });
  const [birthdate, setBirthdate] = React.useState({ birthdate: "" });

  const saveName = () => {
    console.log(name);
    console.log(firstName);
    console.log(birthdate);
    //REST-Call
  };
  return (
    <div>
      {!childKilled && (
        <ChildComponent
          name={name}
          firstName={firstName}
          birthdate={birthdate}
          setFirstName={setFirstName}
          setBirthdate={setBirthdate}
          setName={setName}
          saveName={saveName}
          setChildKilled={setChildKilled}
        />
      )}
    </div>
  );
};

export default ParentComponent;

问题：如您所见，我不只是用钩子设置值。我在一个对象中定义了一个属性，并且将设置该对象的这个属性（例如，
{firstName:”“}
）。这样，在调用
saveName
时，name、firstName和birthdate的状态都将具有空字符串（
{name:}
，
{firstName:}
，
{birthdate:}
）。在调用
saveName
之前，所有状态似乎都正常。所以我猜
useffect
钩子把事情搞砸了。因此，无法传输任何属性

是什么导致了这个问题

注意：我想保留该属性（
{firstName:”}
而不是
“
）

代码沙盒：
我可以在代码沙盒的“问题”选项卡中看到您的代码有问题。以下是：

React Hook useEffect缺少依赖项：“saveName”。包括它或删除依赖项数组。如果“saveName”更改太频繁，请查找定义它的父组件，并将该定义包装在useCallback中。（反应钩/详尽的DEP）

当我在useffect（）钩子的dependency数组中添加“saveName”时，我确实看到saveName（）函数在控制台中记录了这些名称

import React from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [childKilled, setChildKilled] = React.useState(false);
  const [name, setName] = React.useState({ name: "" });
  const [firstName, setFirstName] = React.useState({ firstName: "" });
  const [birthdate, setBirthdate] = React.useState({ birthdate: "" });

  const saveName = () => {
    console.log(name);
    console.log(firstName);
    console.log(birthdate);
    //REST-Call
  };
  return (
    <div>
      {!childKilled && (
        <ChildComponent
          name={name}
          firstName={firstName}
          birthdate={birthdate}
          setFirstName={setFirstName}
          setBirthdate={setBirthdate}
          setName={setName}
          saveName={saveName}
          setChildKilled={setChildKilled}
        />
      )}
    </div>
  );
};

export default ParentComponent;

import React, { useEffect } from "react";

const ChildComponent = ({
  name,
  firstName,
  birthdate,
  setFirstName,
  setBirthdate,
  setName,
  saveName,
  setChildKilled
}) => {
  useEffect(() => () => saveName(), []);

  const handleChange = event => {
    switch (event.target.name) {
      case "name":
        setName(event.target.value);
        break;
      case "firstName":
        setFirstName(event.target.value);
        break;
      case "birthdate":
        setBirthdate(event.target.value);
        break;
      default:
        break;
    }
  };

  const handleSave = event => {
    setChildKilled(true);
  };

  return (
    <div>
      <input name={"name"} value={name.name} onChange={handleChange} />
      <input
        name={"firstName"}
        value={firstName.firstName}
        onChange={handleChange}
      />
      <input
        name={"birthdate"}
        value={birthdate.birthdate}
        onChange={handleChange}
      />
      <button onClick={handleSave}>save</button>
    </div>
  );
};

export default ChildComponent;