我正在尝试实现一个向导，其中的每个步骤都会进行一次调用以更新对象。我有一个UNUserNotificationCenter.current().removeAllPendingNotificationRequests()，其中保存着以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: ""}时，名称状态firstName，生日将全部具有空字符串（{name: ""}，{firstName: ""}，{birthdate: ""}）。在调用saveName之前，所有状态似乎都很好。因此，我猜想saveName挂钩弄乱了某些东西。因此，无法传输任何属性。
什么原因导致此问题？
注意：我想保留属性（useEffect，而不是{firstName: ""}）。
代码沙箱：https://codesandbox.io/s/happy-rhodes-8w7hg?fontsize=14&hidenavigation=1&theme=dark
答案 0 :(得分：0)
我可以在CodeSandbox的“问题”标签中看到您的React代码有问题。如下：
反应挂钩useEffect缺少依赖项：'saveName'。包括它或删除依赖项数组。如果'saveName'更改过于频繁，请找到定义它的父组件，然后将该定义包装在useCallback中。 （反响/详尽的下降）
当我在useEffect（）钩子的依赖关系数组中添加“ saveName”时，我确实看到您的saveName（）函数在控制台中记录了这些名称。