未在 React 中设置 useState

Question

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

即使我 setTimeout 来查看索引是否更新仍然没有。在这里完全混淆了。

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;
});