javascript - 为什么使用钩子(Hook)单击按钮后状态不更新？

Question

你能告诉我为什么状态没有更新吗？单击按钮时我更新了状态，但是当我在 setinterval 上控制我的状态时它没有更新，为什么？

这是我的代码

https://codesandbox.io/s/cool-shamir-8lmpo

 <button
        onClick={() => {
          setState({
            filters: {
              apps: "DDDDDDH",
              searchText: "12333",
              taskType: "",
              dateFrom: "",
              dateTo: "",
              status: ""
            }
          });
        }}
      >


useEffect(() => {
    console.log("===============");
    setInterval(() => {
      console.log(state);
    }, 10000);
  }, []);

点击按钮后 searchText: "12333", searchtext 的状态应该是 12333 但它显示为空 wny ？

Answer 1

这里发生的是，点击按钮时状态正在改变，但要在控制台中呈现它，应该清除 setInterval。试试这个!

useEffect(() => {
    console.log("===============");
    const interval = setInterval(() => {
      console.log(state);
    }, 10000);
    return () => clearInterval(interval);
}, [state]);