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

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(() => {

    console.log("===============");

    const interval = setInterval(() => {

      console.log(state);

    }, 10000);

    return () => clearInterval(interval);

}, [state]);

Answer 2

在 React 中设置 state 是异步的，而不是使用 interval，你需要跟踪 state 值useEffect的依赖数组：

useEffect(() => {

      console.log(state);

  }, [state]);

Answer 3

为什么在单击按钮时更新状态时使用 setInterval？试试这个。

useEffect(() => {

    console.log("===============");

    console.log(state);

  }, []);