【问题标题】：Call a function one time on page load在页面加载时调用一次函数
【发布时间】：2020-03-03 11:50:18
【问题描述】：

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

以下是相关代码：

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

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

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

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

【问题讨论】：

sortBy 或 changePage 或 search 更改时执行 updateData 是否不正确？
为什么三个依赖做一个useEffect不够？ updateData 是否会更改三个 deps 值中的任何一个？
每个效果运行一次...下次观察到的道具有任何变化时运行。
@Jai 我怎样才能让它最初运行一次，而不是对页面加载的每个效果
我认为你必须用一些 if 语句来“保护”你的 updateData()。

标签： reactjs use-effect react-lifecycle

【解决方案1】：

我可以建议您使用另一个 useEffect 和 useState。我需要检查的是，如果一个状态道具是真实的，那么一切都应该运行。为了限制这一点，我将使用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.
  }
}, []);

注意：- 顺序很重要。

【讨论】：

哈哈，我们最终得到了非常相似的解决方案。多诺为什么有人对他们投反对票。可能是其他答案不好的人之一。 +1
我没有尝试过，但是从阅读代码来看，updateData 不会在sortyBy, search or changePage 更改时被调用

【解决方案2】：

添加挂载状态

我认为这会奏效。但是我觉得很乱。也可能 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();
}, []);

【讨论】：