Question

当用户单击向上或向下箭头并且出于某种原因未更新状态时，我正在尝试使useState工作。

即使我设置了timeout以查看 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函数内部的闭包中也永远不会改变。在新的渲染过程中，将创建一个具有不同常量handle的新index函数，但是由于第二个参数useEffect(fn, [])确保执行fn，该函数将被忽略。仅在第一次渲染期间。

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

在React中未设置useState

2 个答案: