Question

如果状态变量can_update为true，我会在useEffect内设置一个间隔，以每33秒更新一次数据。 can_pdate的初始值= true。问题是，即使我将can_update更改为false（使用disable_update函数），在update_groups函数中它仍然是正确的。

  const [can_update, set_can_update] = useState(true);
  const [groups, set_groups] = useState([]);

  const intervalRef = useRef();

  useEffect(() => {
    update_groups();
    const update_interval = setInterval(() => {
      update_groups();
    }, 33000);
    intervalRef.current = update_interval;
    return () => {
      clearInterval(intervalRef.current);
    };
  }, [project_data.id]);

  const update_groups = () => {
    if (can_update) {
      UI.get(`/project/${project_data.id}/controllers/`).then(
        (data) => {
          set_groups(data.groups);
        },
        (error) => {
          console.log("Не удалось загрузить список групп");
        },
      );
    }
  };

  const enable_update = () => {
    set_can_update(true);
  };

  const disable_update = () => {
    set_can_update(false);
  };

我尝试将条件移入

setInterval: `const update_interval = setInterval(() => {
    if (can_update){ update_groups()};
}

，并将setInterval替换为递归setTimeout。没有变化。

我在类组件中有一些类似的代码，并且似乎没有这样的问题。

Answer 1

您需要将can_update添加到useEffect部门，否则

所有值从组件范围（例如道具和状态）转变过来时间和效果所使用的时间。 https://reactjs.org/docs/hooks-effect.html

在您的情况下，useEffect被调用一次，每33秒在内部调用一个函数update_groups，其作用域值为can_update = true。

React.useEffect(() => {
    if (can_update) {
        update_groups();
        const update_interval = setInterval(() => {
            update_groups();
        }, 33000);
        intervalRef.current = update_interval;
        return () => {
            clearInterval(intervalRef.current);
        };
    }
}, [project_data.id, can_update]);

const update_groups = () => {
    UI.get(`/project/${project_data.id}/controllers/`).then(
        data => {
            set_groups(data.groups);
        },
        error => {
            console.log('Не удалось загрузить список групп');
        },
    );
};

功能组件的setInterval内部的条件

1 个答案: