У меня есть 2 внешних события, input и keydown для элемента ввода при запуске ввода он вызовет setInput компонент React. Когда keydown событие для arrowDown запуска, в идеале входное значение должно быть задано внутри handleInput , но оно пустое, я что-то пропустил?

 const SearchBox : React.FunctionComponentlt;ISearchPropsgt; = React.memo((props: ISearchProps) =gt; {  const [input, setInput] = React.useState({value: '', redirect: false});   useEffect(() =gt; {  const container = document.querySelector('.xxx');  container.addEventListener('input', handleInput);  container.addEventListener('keydown', handleKeyboardEvent);  }, []);   const handleInput = (e) =gt; {  setInput({value: e.currentTarget.value, redirect: false});  }   const handleKeyboardEvent = (e) =gt; {  switch (e.key) {  case 'ArrowDown':  console.log(input);  setActiveSuggestionIndex(activeSuggestionIndex === suggestions.length - 1 ? 0 : activeSuggestionIndex   1);  e.preventDefault();  break;  default:  break;  }  } }  

Вопрос

Это проблема устаревших вложений состояния в функции обратного вызова. Значение начального input состояния { value: '', redirect: false } закрывается в копии handleKeyboardEvent из начального цикла рендеринга. Он никогда не будет обновляться.

Решения

Используйте React ref и useEffect для кэширования копии значения

Используйте ссылку React и дополнительный useEffect крюк для кэширования значения, доступ к которому будет осуществляться асинхронно при обратном вызове.

 const [input, setInput] = React.useState({ value: '', redirect: false }); const inputRef = React.useRef(input); // lt;-- state cache  useEffect(() =gt; {  const container = document.querySelector('.xxx');  container.addEventListener('input', handleInput);  container.addEventListener('keydown', handleKeyboardEvent);   return () =gt; {  container.removeEventListener('input', handleInput);  container.removeEventListener('keydown', handleKeyboardEvent);  }; }, []);  useEffect(() =gt; {  inputRef.current = input; // lt;-- update state cache value }, [input]);  const handleInput = (e) =gt; {  setInput({ value: e.currentTarget.value, redirect: false }); };  const handleKeyboardEvent = (e) =gt; {  switch (e.key) {  case 'ArrowDown':  console.log(inputRef); // lt;-- read current state cache value   setActiveSuggestionIndex(activeSuggestionIndex =gt;   activeSuggestionIndex === suggestions.length - 1  ? 0  : activeSuggestionIndex   1  );  e.preventDefault();  break;  default:  break;  } };  

Используйте useEffect с функцией зависимости и очистки

Поскольку вы также должны уже возвращать функцию очистки из списка useEffect для удаления прослушивателей событий при отключении, добавьте input состояние в массив зависимостей (и любые другие отсутствующие зависимости, на которые может пожаловаться линтер), чтобы при input обновлении состояния текущее значение состояния было повторно заключено в область обратного вызова.

 useEffect(() =gt; {  const handleInput = (e) =gt; {  setInput({ value: e.currentTarget.value, redirect: false });  };   const handleKeyboardEvent = (e) =gt; {  switch (e.key) {  case 'ArrowDown':  console.log(input);   setActiveSuggestionIndex(activeSuggestionIndex =gt;   activeSuggestionIndex === suggestions.length - 1  ? 0  : activeSuggestionIndex   1  );  e.preventDefault();  break;  default:  break;  }  };   const container = document.querySelector('.xxx');   container.addEventListener('input', handleInput);  container.addEventListener('keydown', handleKeyboardEvent);   return () =gt; {  container.removeEventListener('input', handleInput);  container.removeEventListener('keydown', handleKeyboardEvent);  }; }, [input]);