Reactjs 更新嵌套setTimeout回调中的React状态

有人能告诉我这有什么问题吗？为什么“视频变量”的状态仍然是假的？因此，即使h2元素已渲染且可见（即，视频变量的状态已更新为true），当我单击并调用hideVideo函数时，视频状态仍然为false？非常感谢

export default function App() {
  const [message, showMessage] = useState(false);
  const [video, setVideo] = useState(false);
  
let modalTimeout, videoTimeout;

  useEffect(() => {
   
    window.addEventListener("click", hideVideo);
    setupTimeouts();
    return () => {
      clearTimeout(modalTimeout);
      clearTimeout(videoTimeout);
    };
  }, []);

  const setupTimeouts = () => {
    modalTimeout = setTimeout(() => {
      showMessage(true);

      videoTimeout = setTimeout(() => {
       
        showMessage(false);
        setVideo(true);
      }, 4000);
    }, 2000);
  };

  const hideVideo = () => {
    console.log(video);
    showMessage(false);
    if (video === true) {
      setVideo(false);
      
    }
  };

  return (
    <div className="App">
      {message && <h1>Message</h1>}
      {video && <h2>Video</h2>}
    </div>
  );
}

导出默认函数App（）{
const[message，showMessage]=useState（false）；
const[video，setVideo]=使用状态（false）；
让modalTimeout，videoTimeout；
useffect（（）=>{
window.addEventListener（“单击”，hideVideo）；
设置超时（）；
return（）=>{
clearTimeout（modalTimeout）；
clearTimeout（视频超时）；
};
}, []);
常量设置超时=（）=>{
modalTimeout=设置超时（（）=>{
showMessage（true）；
videoTimeout=setTimeout（（）=>{
showMessage（假）；
setVideo（真）；
}, 4000);
}, 2000);
};
常量hideVideo=（）=>{
console.log（视频）；
showMessage（假）；
如果（视频===真）{
setVideo（假）；
}
};
返回(
{message&&message}
{video&&video}
);
}

当您调用useEffect窗口侦听器时，请将默认的视频值false附加到函数hideVideo（），这样它将始终为false，我创建了一个按钮，向您显示视频状态值确实发生了更改。检查最后的测试功能

export default function App() {
const [message, showMessage] = useState(false);
const [video, setVideo] = useState(false);
let modalTimeout, videoTimeout;

useEffect(() => {
  window.addEventListener("click", hideVideo);
  setupTimeouts();
  return () => {
    clearTimeout(modalTimeout);
    clearTimeout(videoTimeout);
  };
  }, []);

const setupTimeouts = () => {
  modalTimeout = setTimeout(() => {
    showMessage(true);
    videoTimeout = setTimeout(() => {
      showMessage(false);
      setVideo(true);
    }, 4000);
  }, 2000);
};

const hideVideo = () => {
  console.log(video);
  showMessage(false);
  if (video) {
    setVideo(false);
  }
};
const test = (event) => {
  event.stopPropagation();
  console.log(video)
}
return (
  <>
    {message && <h1>Message</h1>}
    {video && <h2>Video</h2>}
    <button onClick={test}>test</button>
  </>
);

导出默认函数App（）{
const[message，showMessage]=useState（false）；
const[video，setVideo]=使用状态（false）；
让modalTimeout，videoTimeout；
useffect（（）=>{
window.addEventListener（“单击”，hideVideo）；
设置超时（）；
return（）=>{
clearTimeout（modalTimeout）；
clearTimeout（视频超时）；
};
}, []);
常量设置超时=（）=>{
modalTimeout=设置超时（（）=>{
showMessage（true）；
videoTimeout=setTimeout（（）=>{
showMessage（假）；
setVideo（真）；
}, 4000);
}, 2000);
};
常量hideVideo=（）=>{
console.log（视频）；
showMessage（假）；
if（视频）{
setVideo（假）；
}
};
常量测试=（事件）=>{
event.stopPropagation（）；
console.log（视频）
}
返回(
{message&&message}
{video&&video}
测试
);

---

}

谢谢加布里埃尔·埃斯皮诺萨。到目前为止，我一直在使用类组件，从未遇到过这个问题。显然，使用钩子，事件处理程序无法访问状态。