reactjs - 我们可以使用函数作为useEffect中的第二个参数吗

我有以下功能：

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时，有什么区别？


为了你？没有警告的干净代码。
对于React？正是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);

但是然后您可以通过某种方式更改handleEnterPress的值（很多情况不是您的情况，但这是useEffect所期望的）
而且您在handleEnterPress的依赖项中没有useEffect，因此不会发挥作用。
然后value发生更改，效果发生清除

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

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

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

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

编辑：

当chips更改时，handleEnterPress也会更改，并且由于您没有将handleEnterPress添加到依赖数组中，因此您将始终具有handleEnterPress的旧值和chips的旧值。

我的答案中说明了您的情况，即handleEnterPress发生变化的情况，但事件侦听器仍具有handleEnterPress的旧值

关于reactjs - 我们可以使用函数作为useEffect中的第二个参数吗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56425444/