0

我想实现以下目标。动作从redux被导入到这个组件中。它从 firebase 数据库中获取数据。数据显示在此组件内。

我的问题是由于优化，每次安装组件时都会获取数据。我想阻止这种行为。我希望这仅在第一次渲染组件时获取，不再获取。当然，它应该在数据更改时获取，否则不会。我用过useCallback，但下面的代码肯定有错误。用户通过身份验证时会传递 Token 和 Id。

import { fetchFavs } from "../../store/actions";
import { useSelector, useDispatch } from "react-redux";


const token = useSelector((state) => state.auth.token);
  const id = useSelector((state) => state.auth.userId);
  const fetchedFavs = useSelector((state) => state.saveFavs.fetchedFavs);

  const dispatch = useDispatch();

const fetchFavsOptimized = useCallback(() => {
    dispatch(fetchFavs(token, id));
    console.log("rendered");
  }, [token, id, dispatch]);

  useEffect(() => {
    if (token) {
      fetchFavsOptimized();
    }
  }, [fetchFavsOptimized, token]);
4

2 回答 2

2

有两种处理方法，一种是显式的，一种是隐式的。

明确的方法是在你的 redux 存储中添加一个新的布尔项，并在每次加载组件时检查是否应该从数据库加载数据。

所以你的 redux 存储可能有一个新的键/值dataLoaded: false：现在在您的组件中，您需要从您的 redux 存储中加载它并在您的使用效果中检查它：

const dataLoaded = useSelector((state) => state.dataLoaded);

useEffect(() => {
    if (token && !dataLoaded) {
      fetchFavsOptimized();
    }
  }, [fetchFavsOptimized, token, dataLoaded]);

在从数据库加载数据完成后，不要忘记在fetchFavsOptimized函数中将dataLoaded更新为true 。这样做的好处是，每次您想再次从数据库加载数据库时，您只需将dataLoaded设置为false。

隐式方法是检查数据长度，如果为 0，则执行加载。假设您以这种形式将数据存储在 redux 存储中：data: []并且您的数据是一个数组（您可以通过将数据初始化为null并检查数据是否为 ​​null 来做同样的事情），您的组件将如下所示：

const data = useSelector((state) => state.data);

useEffect(() => {
    if (token && data.length === 0) {
      fetchFavsOptimized();
    }
  }, [fetchFavsOptimized, token, data]);

请记住，我不会那样做，因为如果您没有任何数据，您最终可能会陷入无限循环，但在其他情况下使用它是一种很好的技术。

于 2021-03-01T14:45:49.703 回答
0

仅在组件安装时获取一次：（注意[]）

React.useEffect(() => {
    fetchFavsOptimized()
}, []) // <- this empty square brackets allow for one execution during mounting

我不确定，但useEffect可能是连续调用的问题[fetchFavsOptimized, token]。放置fetchFavsOptimized函数[]可能不是最好的方法。

你想获取，当数据改变时，但是什么数据呢？你的意思是token？或者是其他东西？

React.useEffect()当数据发生变化时，钩子会通过将这些可变数据放入 中来[here_data]获取useEffect。例子：

const [A, setA] = React.useState();

React.useEffect(() => {
    // this block of code will be executed when state 'A' is changed
},[A])

使用的最佳实践useEffect是将运行中的条件分开。如果您需要获取一些data changeAND on component mount，请编写TWO useEffect函数。data change和分开component mount。

于 2021-03-01T14:42:53.253 回答