如何仅在反应中分派异步操作一次？答案

【问题标题】：How to dispatch async actions in react only once?如何仅在反应中分派异步操作一次？
【发布时间】：2021-08-01 17:42:19
【问题描述】：

如何在仅响应一次的情况下调度异步操作？

我正在使用 react 功能组件。

我正在使用 react-redux 和 redux-thunk 来执行副作用（以及重新选择）。

Following 是一个调度异步操作并从商店中选择商品的组件。

const Card = (props) => {
  const dispatch = useDispatch();
    dispatch(Effects.getItems());
  const items = useSelector(selectitems);

  return (
    <Container>
      {items.map((item) => (
        <p>{item.name}</p>
      ))}
    </Container>
  );
};

问题是这会无限发送网络请求，我的浏览器正在崩溃。

我正在接收数据。但问题是它在后面发送无限请求。

我该如何解决这个问题？即只获取一次数据。

我需要把它包在任何钩子里吗？这样做的最佳方法是什么？

【问题讨论】：

将 dispach 调用放入 useEffect(>dispatch here<, [dispatch])，或者如果您在每个应用程序生命周期中只需要调用一次，则在您的商店中添加标志，指示是否已获取项目并在调用 dispatch 之前检查它是否

标签： reactjs

【解决方案1】：

您需要将 useEffect 与空数组依赖项一起使用。所以它只会调用一次：

useEffect(() => {
  dispatch(Effects.getItems());
}, [])

【讨论】：