我们可以在useEffect中使用函数作为第二个参数吗?

Question

>我有以下函数：

function handleEnterPress(e) {
if (e.keyCode === 13) {
if (value !== "") {
let toAdd = true;
chips.forEach(chip => {
if (chip.value === value) {
toAdd = false;
}
});
if (toAdd) {
let chipsCopy = [...chips, { value, isDisabled: false }];
setChips(chipsCopy);
}
}
setValue("");
}
}

我有以下useEffect：

useEffect(() => {
inputRef.current.addEventListener("keyup", handleEnterPress);
return () =>
inputRef.current.removeEventListener("keyup", handleEnterPress);
}, [value]);

现在反应给了我一个警告：

React Hook useEffect缺少一个依赖关系'handleEnterPress'。

当我们在第二个参数数组中添加handleEnterPress时有什么区别？

Answer 1

当我们在第二个参数数组中添加handleEnterPress时，它有什么区别。

给你的？没有警告的更干净的代码。
对于反应？就是它与useEffect一起工作的方式。

若要删除此警告，需要将handleEnterPress添加到useEEfect的依赖项数组

useEffect(() => {
inputRef.current.addEventListener("keyup", handleEnterPress);
return () =>
inputRef.current.removeEventListener("keyup", handleEnterPress);
}, [value, handleEnterPress]);

你需要这个的原因是因为 react 无法知道handleEnterPress做什么，或者是什么。如果handleEnterPress是一个变量并且它的值发生了变化怎么办？如果您更改handleEnterPress则需要再次"运行"效果，但如果您只使用[value]，则handleEnterPress更改时它不会"运行"。在你的情况下，也许它永远不会改变，但反应无法知道，所以......它告诉您添加为依赖项。

例如

1 .在useEffect中，添加事件侦听器。

inputRef.current.addEventListener("keyup", handleEnterPress);

2. 但是你改变了一些handleEnterPress的值(很多这不是你的情况，但这是useEffect所期望的)
   而且你在useEffect的依赖关系中没有handleEnterPress，所以它不会运行效果。

3. 然后value更改并清理效果

   () => inputRef.current.removeEventListener("keyup", handleEnterPress);
   

在这一部分中，您将尝试删除具有新handleEnterPress值的handleEnterPress，但不是第一步中的值，因此您正在尝试删除不存在的事件侦听器。

包含旧值的第一个handleEnterPress永远不会被删除。

这很糟糕，这就是为什么您需要添加handleEnterPress作为依赖项的原因

编辑：

当chips发生变化时，handleEnterPress也会发生变化，并且由于您不向 depéndency 数组添加handleEnterPress，因此您将始终具有旧值handleEnterPress和旧值chips。

我在我的回答中解释了您的情况，是handleEnterPress发生变化的情况，但事件侦听器仍然具有旧的handleEnterPress值

Answer 2

经过一些谷歌搜索，我找到了更好的方法来做到这一点 我们可以将函数 'handleEnterPress' 函数放在 useEffect 本身中：

useEffect(() => {
function handleEnterPress(e) {
if (e.keyCode === 13) {
if (value !== "") {
let toAdd = true;
chips.forEach(chip => {
if (chip.value.toUpperCase() === value.toUpperCase()) {
toAdd = false;
}
});
if (toAdd) {
let chipsCopy = [...chips, { value, isDisabled: false }];
setChips(chipsCopy);
}
}
setValue("");
}
}
inputRef.current.addEventListener("keyup", handleEnterPress);
return () =>
inputRef.current.removeEventListener("keyup", handleEnterPress);
}, [value, chips]);