我有以下功能：

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在第二个参数数组中？

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

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

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

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

你之所以需要这个，是因为反应不知道什么handleEnterPress做，或者是什么。如果什么handleEnterPress是一个变量并且它的值已经改变了？如果你改变handleEnterPress你将需要再次“运行”效果，但如果你只使用[value]，它不会“运行”handleEnterPress变化。在你的情况下，也许它永远不会改变，但反应不知道这一点，所以......它告诉你添加为依赖项。

e.g.

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

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

2. 但随后你改变了handleEnterPress某种程度上（很多这不是你的情况，但这是预期的useEffect)
   而你没有handleEnterPress依赖于useEffect，所以它不会运行效果。

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

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

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

首先handleEnterPress包含旧值的内容永远不会被删除。

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

Edit:

When chips改变，handleEnterPress也会改变，因为你没有添加handleEnterPress对于依赖数组，您将始终拥有旧值handleEnterPress还有旧值chips.

我的回答中解释了您的情况，是这样的情况handleEnterPress更改，但事件侦听器仍然具有旧值handleEnterPress