useState 未在 React 中设置

Question

当用户单击向上或向下箭头并且由于某种原因状态未更新时，我试图让 useState 工作。

即使我设置超时以查看 index 是否更新仍然没有。在这里完全混淆了。

import React, { useEffect, useState } from 'react';

const Wrapper = ({ children }) => {
  const [index, setIndex] = useState(-1);

  useEffect(() => {
    document.addEventListener('keydown', handler);
    return () => {
      document.removeEventListener('keydown', handler);
    };
  }, []);

  const handler = (event) => {
    if (event.key === 'ArrowDown') {
      setIndex(index + 1);
      console.log('index = ', index);
    }
  };

  return (
    <div>
      {children}
    </div>
  );
};

export default Wrapper;

Answer 1

由于 setState 的异步性质，您应该记录之前的状态。

setIndex(prev => {
  console.log("prev = ", prev);
  return prev + 1;
});

Answer 2

提示在 const [index... 中 - 它永远不会改变。使用 setState:

的函数形式

const handler = (event) => {
  if (event.key === 'ArrowDown') {
    setIndex(oldIndex => oldIndex + 1)
  }
}

因为第一次渲染时的index会是-1，即使在handle函数的闭包中也不会改变。在新渲染期间，将创建一个具有不同常量 index 的新 handle 函数，但该函数将被忽略，因为 useEffect(fn, []) 第二个参数确保 fn 将被执行仅在第一次渲染期间。

有关详细信息，请参阅 https://overreacted.io/a-complete-guide-to-useeffect/。

useState 未在 React 中设置

useState not getting set in React

reactjs

react-hooks