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

Question

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

添加挂载状态

我认为这会奏效。但对我来说感觉很乱。也可能 state 被批在一起，你可能会从中得到一些额外的触发器。所以请使用您的设置对其进行测试。

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();
}, []);

Answer 2

我可以建议您使用另一个 useEffect 和 useState。我需要检查的是，如果一个 state prop 是真实的，那么所有的东西都应该运行。为了限制这一点，我会使用 if 条件来检查该状态值是否为真，然后运行否则不会。

我在想的是：

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.
  }
}, []);

注意:- 顺序很重要.

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

Call a function one time on page load

reactjs

react-lifecycle

use-effect

添加挂载状态