为什么使用钩子点击按钮后状态没有更新？

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

  }, []);

After button click  searchText: "12333",searchtext 应该12333处于 state 但它显示为空 wny ？

Answer 1

这里发生的事情是，当按钮被点击时状态正在改变，但要在控制台中呈现它，应该清除 setInterval。试试这个！。useEffect(() => {&nbsp; &nbsp; console.log("===============");&nbsp; &nbsp; const interval = setInterval(() => {&nbsp; &nbsp; &nbsp; console.log(state);&nbsp; &nbsp; }, 10000);&nbsp; &nbsp; return () => clearInterval(interval);}, [state]);

Answer 2

在 React 中设置 state 是异步的，而不是使用 interval，你需要跟踪 state 值useEffect的依赖数组：useEffect(() => {&nbsp; &nbsp; &nbsp; console.log(state);&nbsp; }, [state]);

Answer 3

为什么在单击按钮时更新状态时使用 setInterval？试试这个。useEffect(() => {&nbsp; &nbsp; console.log("===============");&nbsp; &nbsp; console.log(state);&nbsp; }, []);