Можем ли мы использовать функцию в качестве второго аргумента в 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

После некоторого поиска в Google я нашел лучший способ сделать это Мы можем поместить функцию '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]);

Answer 2

Какая разница, когда мы добавляем handleEnterPress во второй массив аргументов.

Для вас?Код уборщика без предупреждений.
Для React?Это просто способ работы с useEffect.

. Чтобы удалить это предупреждение, вам нужно добавить handleEnterPress в массив зависимостей useEEfect

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

Причина, по которойвам это нужно, потому что реакция не может знать, что 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