时间戳

首页 > 解决方案 > Redux 不断更新

reactjs - Redux 不断更新

问题描述

我正在使用 expo 构建一个带有 React Native 的应用程序，并且我实现了 Redux。现在在我的组件中，我需要从 API 中获取一些东西来填充列表。我决定使用 useEffect 挂钩来实现这一点。现在在我的 useEffect 钩子的依赖数组中，我放置了我的 Redux 状态列表。像这样：

const onFetchOrders = async (query: string, offset: number, limit?: number, filter?: {}) => {
  await props.fetchOrders('', 0);

}

useEffect(() => {
  setIsLoading(true);
  onFetchOrders('', 0);

  if (props.orders.length > 0) {
    setOrders(props.orders)
  } else {
    setIsLoading(true);
  }

}, [props.orders])

订单被映射到另一个组件中的道具：

const mapState = (state : RootState) => ({
    orders: state.orders.items,
    debtor: state.debtor.debtor,
    totalCount: state.orders.totalCount
})

const mapDispatch = (dispatch: any) => {
    return {
      fetchOrders: (query?: string, offset?: number, limit?: number, filters?: {}) => dispatch(tFetchOrders(query, offset, limit, filters)),
      fetchDebtor: (uuid: string) => dispatch(thunkFetchDebtor(uuid)),
      fetchCredentials: () => dispatch(thunkFetchCredentials()),
    };
  }

//const connector = connect(mapState, mapDispatch)(Root);
export const connector = connect(mapState, mapDispatch);

export type OrdersProps = ConnectedProps<typeof connector> & OrderStackNavProps<"Orders">;

现在，如果我启动应用程序，我的 useEffect 挂钩会不断重新渲染，因为订单数组中似乎有更新。

标签： reactjsreact-nativereduxredux-thunk

解决方案

您编写useEffect钩子的方式将在每次props.orders更改时运行，因为您将该数组中的道具作为可选参数传递。您可以在此处阅读有关useEffectReactJS 文档的工作原理的更多信息。

如果你希望你的useEffect钩子在组件渲染时只运行一次，你应该传递一个空数组：

useEffect(() => {
  setIsLoading(true);
  onFetchOrders('', 0);
}, []);

一旦你开始你的获取，你可以将订单添加到另一个useEffect钩子中的道具：

useEffect(() => {
  if (props.orders.length > 0) {
    setIsLoading(false);
    setOrders(props.orders)
  } else {
    setIsLoading(true);
  }

}, [props.orders])

推荐阅读