Значение useState варьируется для массива - PullRequest
Новая
       7

Значение useState варьируется для массива

1 голос
/ 06 июня 2019

Я пытаюсь использовать ловушки React для управления списком и сохранения его в localStorage. Теперь все прекрасно работает до того момента, когда я пытаюсь вызвать добавление вне основного контекста функции (компонента).

Посмотрите на код: https://repl.it/repls/AjarDistortedWeb

При использовании кнопок для добавления элементов в список все идет хорошо (есть несколько дополнительных операторов console.log для отслеживания происходящего). Все ломается при нажатии за пределами красного поля, чтобы добавить элемент.

Пример потока в тексте
(входное значение) 1 -> (Нажмите) Добавить -> (Список содержит) 1
(входное значение) 2 -> (Нажмите) Добавить -> (Список содержит) 1, 2
(входное значение) 2 -> (Нажмите) Удалить -> (Список содержит) 1
(входное значение) 2 -> (Щелкните) Очистить -> (Список содержит) пусто
Все хорошо до этого момента

Теперь попробуйте щелкнуть за пределами красной рамки с помощью ввода «а», скажем. Некоторые предыдущие значения как-то попадают в список.

На самом деле, похоже, что нажатие кнопок и щелчок снаружи отслеживают их собственные значения.

Как это возможно и что с этим делать?

Я попытался переместить фрагменты (в разные файлы, все в одном файле). Также пытался использовать 'useEffect', но не уверен, где его разместить в этом примере 

  useOutsideClick(mainRef, () => {
    if (searchInputRef.current) {
      addHistoryEntry(searchInputRef.current.value);
    }
  });

Это код, который отвечает за обработку внешних кликов

1 Ответ

1 голос
/ 06 июня 2019

Вы создаете событие с useEffect, но делаете это только тогда, когда компонент монтируется. Передав [] в качестве второго аргумента, вы в итоге создаете событие click, которое заканчивается ссылкой на устаревший объект после первого рендеринга.

Изменение: 

  useEffect(() => {
    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  }, []);

до: 

  useEffect(() => {
    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  });

Все, что я делаю, это убираю второй аргумент. Это удалит старое событие и создаст новое событие с правильной ссылкой каждый раз при рендеринге компонента.

Я исправил некоторые другие вещи, например, не использовал ссылку для получения входных значений. https://repl.it/repls/NewEnragedScope

...