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

Question

我正在尝试实现一个向导，其中每个步骤都会进行一次调用以更新对象。我有一个ParentComponent，它以ChildComponent的形式保存更改的数据。我发现了一个useEffect用例，当该组件卸载时会调用该用例（以前是componentWillUnmount函数）：

useEffect(() => () => saveName(), []);

[通过在() =>中具有额外的useEffect，我应该得到与componentWillUnmount相同的效果。

我的父组件存储以下形式的数据：

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;

我的子组件将在要卸载时将调用saveName函数。在此示例中，我使用钩子childKilled触发了卸载。在我的真实代码中，我打开向导的下一页。

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;

问题：如您所见，我不只是使用钩子来设置值。我在对象内部定义了一个属性，然后将设置该对象的此属性（例如{firstName: ""}）。这样，在调用{name: ""}时，名字，名字，生日的状态将全部为空字符串（{firstName: ""}，{birthdate: ""}，saveName）。在调用saveName之前，所有状态似乎都很好。因此，我想useEffect挂钩弄乱了某些东西。因此，无法传输任何属性。

什么原因导致此问题？

注意：我想保留属性（{firstName: ""}而不是""）。

代码沙箱：https://codesandbox.io/s/happy-rhodes-8w7hg?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我可以在CodeSandbox的'问题'选项卡中看到您的React代码有问题。这是以下内容：

React Hook useEffect缺少依赖项：'saveName'。包括它或删除依赖项数组。如果'saveName'更改过于频繁，请找到定义它的父组件，然后将该定义包装在useCallback中。 （反响/详尽的下降）

[当我在useEffect（）钩子的依赖关系数组中添加'saveName'时，我确实看到您的saveName（）函数在控制台中记录了这些名称。