react 再次调用dispatch会不停重复执行

最新推荐文章于 2023-11-20 10:48:54 发布

lizhaowen2023

最新推荐文章于 2023-11-20 10:48:54 发布

阅读量923

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/jwenlee/article/details/128642721

版权

在React组件中，使用useEffect并传递空数组作为依赖项可确保action只在挂载时分发。如果依赖于特定props或state，则应将它们包含在依赖项列表中，以在变化时更新。这防止了不必要的action重复分发。

摘要由CSDN通过智能技术生成

在 React 组件中使用 useEffect 分发一个 action 并不会导致无限重复调用，但如果组件在重新渲染时继续调用 dispatch，则会导致重复分发 action。

为了避免这种情况，需要在 useEffect 的第二个参数中添加一些依赖项。在这个示例中，我们只需要在组件加载时分发一次 action，所以我们可以使用一个空数组作为依赖项，这样 useEffect 就只会在组件加载时执行一次。

useEffect(() => {
    // 分发 REFRESH_DATA action
    dispatch(refreshData());
  }, []);

这样,就只会在页面初始化时候调用一次。

另一种常见的情况是，当某些 props 或 state 发生更改时，才需要重新分发 action。在这种情况下，可以将这些依赖项列入 useEffect 的第二个参数中，这样当这些依赖项发生变化时，useEffect 就会重新执行。

useEffect(() => {
    // 分发 REFRESH_DATA action
    dispatch(refreshData(props.id));
  }, [props.id]);

这样,当props.id发生变化时候才会触发action,就不会做多次调用

记得要根据自己的项目需求来定义依赖项。

关注