4

我有以下功能：

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 给了我一个警告：

React Hook useEffect 缺少依赖项“handleEnterPress”。

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

4

2 回答 2

4

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

为你？更简洁的代码，没有警告。
对于反应？只是它的工作方式useEffect。

要删除此警告，您需要添加handleEnterPress到useEEfect

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

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

例如

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

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

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

  2. 然后value发生变化并清理效果 

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

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

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

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

编辑：

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

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

于 2019-06-03T11:05:57.080 回答
0

经过一番谷歌搜索后，我找到了一种更好的方法我们可以将函数 '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]);
于 2019-06-03T15:25:42.257 回答