React useEffect有条件地运行

如何解决React useEffect有条件地运行

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

Images.tsx

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

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

解决方法

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

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

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

,

它总是记录0是因为您没有在useEffect的依赖项数组中放置任何内容，因此每当React重新渲染您的组件时，它都会在useEffect里面查看dep数组中没有任何内容，因此只需跳过运行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。