React 2 外面的事件不能共享钩子数据

Question

我有 2 个外部事件，input 和 keydown 用于输入元素，当输入触发时，它将在 React 组件中调用 setInput。当arrowDown 的keydown 事件被触发时，理想情况下输入值应该是handleInput 中设置的值，但它是空的，我错过了什么吗？

const SearchBox : React.FunctionComponent<ISearchProps> = React.memo((props: ISearchProps) => {
   const [input, setInput] = React.useState({value: '', redirect: false});

    useEffect(() => {
        const container = document.querySelector('.xxx');
        container.addEventListener('input', handleInput);
        container.addEventListener('keydown', handleKeyboardEvent);
    }, []);

    const handleInput = (e) => {
        setInput({value: e.currentTarget.value, redirect: false});
    }

    const handleKeyboardEvent = (e) => {
        switch (e.key) {
            case 'ArrowDown':
                console.log(input);
                setActiveSuggestionIndex(activeSuggestionIndex === suggestions.length - 1 ? 0 : activeSuggestionIndex + 1);
                e.preventDefault();
                break;
            default:
                break;
        }
    }
}

Answer 1

问题

这是回调函数中状态过时的问题。 { value: '', redirect: false } 的初始 input 状态值在来自初始渲染周期的 handleKeyboardEvent 的副本中被关闭。它永远不会更新。

解决方案

使用 React ref 和 useEffect 缓存 value 的副本

使用 React ref 和额外的 useEffect 挂钩来缓存要在回调中异步访问的值。

const [input, setInput] = React.useState({ value: '', redirect: false });
const inputRef = React.useRef(input); // <-- state cache

useEffect(() => {
  const container = document.querySelector('.xxx');
  container.addEventListener('input', handleInput);
  container.addEventListener('keydown', handleKeyboardEvent);

  return () => {
    container.removeEventListener('input', handleInput);
    container.removeEventListener('keydown', handleKeyboardEvent);
  };
}, []);

useEffect(() => {
  inputRef.current = input; // <-- update state cache value
}, [input]);

const handleInput = (e) => {
  setInput({ value: e.currentTarget.value, redirect: false });
};

const handleKeyboardEvent = (e) => {
  switch (e.key) {
    case 'ArrowDown':
      console.log(inputRef); // <-- read current state cache value

      setActiveSuggestionIndex(activeSuggestionIndex => 
        activeSuggestionIndex === suggestions.length - 1
          ? 0
          : activeSuggestionIndex + 1
      );
      e.preventDefault();
      break;
    default:
      break;
  }
};

使用 useEffect 与依赖和清理功能

由于您还应该已经从 useEffect 返回一个清理函数以在卸载时删除事件侦听器，因此将 input 状态添加到依赖项数组（以及 linter 可能抱怨的任何其他缺少的依赖项) 这样当input 状态更新时，当前状态值会重新包含在回调范围内。

useEffect(() => {
  const handleInput = (e) => {
    setInput({ value: e.currentTarget.value, redirect: false });
  };

  const handleKeyboardEvent = (e) => {
    switch (e.key) {
      case 'ArrowDown':
        console.log(input);

        setActiveSuggestionIndex(activeSuggestionIndex => 
          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 () => {
    container.removeEventListener('input', handleInput);
    container.removeEventListener('keydown', handleKeyboardEvent);
  };
}, [input]);