reactjs - 反应 useEffect 有条件地运行

Question

如何防止我的 React 组件在每次渲染组件时获取图像并从商店中获取它们？我不想通过一遍又一遍地调用 API 来限制速率，但问题useEffect是它似乎没有意识到变量被设置在效果“外部”。它似乎完全忽略!images.length了，当我记录它的值时，images.length它总是0:(

图片.tsx

const dispatch = useDispatch();
const images = useSelector(selectedImages);

useEffect(() => {
  if (!images.length) {
    dispatch(fetchImages());
  }
}, []);

Answer 1

使用 React 钩子useMemo，您只会在需要时调用 API

https://www.robinwieruch.de/react-usememo-hook

https://reactjs.org/docs/hooks-reference.html#usememo

Answer 2

它总是记录0是因为你没有在依赖数组中放入任何东西，useEffect所以每当 React 重新渲染你的组件时，它会useEffect在 dep 数组中查看并且看不到任何东西，所以它只是跳过运行 that useEffect。

使用时useEffect，应在使用的数组中声明依赖useEffect关系useEffect

const dispatch = useDispatch();
const images = useSelector(selectedImages);

useEffect(() => {
  if (!images.length) {
    dispatch(fetchImages());
  }
}, [images]); // Our deps

所以，让我们说：

1. 首先，默认情况下它将运行useEffect并执行该效果内的所有逻辑。如果 images 数组为空，则调用 API 获取图像。
2. 其次，images数组不再为空，并且第二个images与第images一个为空的数组不同，所以它仍然运行到useEffect. 但它不会再获取图像，因为你if condition有。