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",搜索文本应处于12333状态，但显示为空？

Answer 1

这里发生的是，单击按钮时状态正在改变，但应清除在控制台中渲染它的setInterval。试试这个！。

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

Answer 2

在React中设置状态为异步，而不是使用时间间隔，您需要跟踪状态值useEffect的依赖项数组：

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

Answer 3

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

useEffect(() => {
    console.log("===============");

    console.log(state);
  }, []);

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

3 个答案: