添加安装状态

Question

我有3个useEffect函数，每个函数都调用一个updateData函数。（除此之外，每个人都在做其他事情，因此我无法将它们全部合并。）因此，在页面加载时，updateData被调用3次。

以下是相关代码：

useEffect(() => {
    ...
    updateData();
}, [changePage]);

useEffect(() => {
    ...
    updateData();
}, [search]);

useEffect(() => {
    ...
    updateData();
}, [sortBy]);

如何确保updateData在页面加载时仅被调用一次？

Answer 1

我可以建议您将其他useEffect与useState一起使用。我需要检查的是，如果一个状态道具是真实的，那么所有人都应该运行。为了限制这一点，我将使用if条件来检查该状态值是否为true，然后运行它，否则不运行。

我在想的是：

const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
  if (isLoaded && changePage) {
    updateData(); // <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [changePage]);

useEffect(() => {
  if (isLoaded && search) {
    updateData();// <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [search]);

useEffect(() => {
  if (isLoaded && sortBy) {
    updateData();// <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [sortBy]);

useEffect(() => {
  setIsLoaded(true); // <---sets the isLoaded to true for further observations
  if(isLoaded){
     updateData(); // <----calls the updateData once.
  }
}, []);

注意：- 订单很重要 。

Answer 2

添加安装状态

我认为这会起作用。但这对我来说很混乱。另外，也许状态会被批处理在一起，您可能会从中获得一些额外的触发条件。因此，请使用您的设置进行测试。

const [isMountRender, setMountRender] = useState(true);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [changePage]);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [search]);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [sortBy]);

useEffect(() => {
    setMountRender(false)
    updateData();
}, []);

在页面加载一次调用一个函数

2 个答案:

添加安装状态