时间戳

首页 > 解决方案 > 带有 useEffect 钩子和 useSelector 的无限循环

react-native - 带有 useEffect 钩子和 useSelector 的无限循环

问题描述

我的 React Native 应用程序中有一个标准化的 Redux 存储。

我的减速机的结构是：

{
  byId: {},
  allIds: []
}

在我的组件中，我使用useSelector钩子获取 Redux 状态片段：

const categories = useSelector((state: AppState) =>
  state.products.allIds.map((id) => state.categories.byId[id.toString()])
);

中的逻辑useSelector只是将byId对象转换为数组。

当我将categories数组设置为依赖项时，会发生无限循环：

const [values, setValues] = useState<any[]>([]);

useEffect(() => {
  setValues([{ id: 1 }]);
  console.log("logging");
}, [categories]);

不知道是什么问题。我相信这useSelector是将对象转换为数组的逻辑。

编辑：

完整的组件代码：

// React
import React, { useEffect, useState } from "react";

// React redux
import { useSelector } from "react-redux";
import { AppState } from "@reducers/rootReducer";

// Logic
import ProductsScreenLogic from "./ProductsScreen.logic";

// Common components
import ScreenView from "@common/screen/Screen.view";

// Components
import NewProductModalView from "@components/products/new-product-modal/NewProductModal.view";
import ProductsTabsView from "@components/products/products-tabs/ProductsTabs.view";
import ProductListView from "@components/products/products-list/ProductList.view";
import CategoryListView from "@components/products/category-list/CategoryList.view";

const ProductsScreenView: React.FC = () => {
  const { displayProductList, setDisplayProductList, products } =
    ProductsScreenLogic();


  // Makes the categories ById object into an array of categories
  const categories = useSelector((state: AppState) => state.categories.allIds.map((id) => state.categories.byId[id.toString()])
  );


  const [values, setValues] = useState<any[]>([]);

  useEffect(() => {
    setValues([{ id: 1 }]);
    console.log("logging");
  }, [categories]);

  return (
    <>
      <NewProductModalView />
      <ScreenView></ScreenView>
    </>
  );
};

export default ProductsScreenView;

标签： react-nativereduxreact-reduxinfinite-loopnormalizr

解决方案

问题是您的选择器总是返回一个新的引用（因为调用map）​​。您可以改为使用which 将记住它，并且仅在其中或createSelector内部的某些内容发生更改时才返回新的引用：allIdsbyId

const selectAllCategories = createSelector(
    (state: AppState) => state.categories.allIds,
    (state: AppState) => state.categories.byId,
    (categoriesIds, categoriesById) => categoriesIds.map((id) => categoriesById[id.toString()])
);

但理想情况下，您应该避免使用这种遍历整个byId对象的选择器，因为它有点否定了具有标准化状态的好处。您应该有一个只选择 的父组件，state.categories.allIds然后将 id 作为道具传递给子组件，每个子组件都会选择自己的state.categories.byId[id]. 这样，如果类别发生变化，只有相应的子组件会重新呈现，而不是让父组件和所有子组件重新呈现。

推荐阅读