我们可以使用函数作为 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

\n

当我们在第二个参数数组中添加handleEnterPress 时，会有什么不同。

\n

\n\n

为你？更干净的代码，没有警告。
\n对于反应？这就是它的工作方式useEffect。

\n\n

要消除此警告，您需要将其添加handleEnterPress到依赖项数组中useEEfect

\n\n

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

\n\n

你之所以需要这个，是因为 React 不知道做什么handleEnterPress，或者是什么。handleEnterPress如果是一个变量并且它的值发生了变化怎么办？如果你改变，handleEnterPress你将需要再次“运行”效果，但如果你只使用[value]，它不会“运行”handleEnterPress changes. In your case, maybe it will never change, but react can\'t know that, so... it tells you to add as a dependency.

\n\n

例如

\n\n

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

\n\n

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

\n\n

\n

2. 但是然后你改变了handleEnterPress一些值（很多这不是你的情况，但它是预期的useEffect）
   \n并且你没有handleEnterPress依赖项useEffect，所以它不会运行效果。

\n

3. 然后value发生变化并清除效果

   \n\n

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

\n

\n\n

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

\n\n

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

\n\n

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

\n\n

编辑：

\n\n

当chips更改时，handleEnterPress也会更改，并且由于您没有添加handleEnterPress到 dep\xc3\xa9ndency 数组中，因此您将始终拥有 的旧值handleEnterPress以及 的旧值chips。

\n\n

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

\n