时间戳

首页 > 解决方案 > 错误：重新渲染过多。React 限制了渲染的数量以防止无限循环。如何防止此错误？

javascript - 错误：重新渲染过多。React 限制了渲染的数量以防止无限循环。如何防止此错误？

问题描述

这是我的代码。我想在列表顶部添加一个新的费用项目。我希望就如何在列表顶部创建新费用获得一些帮助。我不断收到同样的错误：重新渲染太多。React 限制了渲染的数量以防止无限循环。我怎样才能解决这个问题？

import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
  selectTitle,
  selectPrice,
  selectCategory,
} from "../../slices/dataSlice";
import { useSelector } from "react-redux";

const RenderedExpense = () => {

  const title = useSelector(selectTitle);
  const price = useSelector(selectPrice);
  const category = useSelector(selectCategory);

  const enteredData = {
    id: Math.random().toString(),
    title: title.disTitle,
    price: price.disPrice,
    category: category.disCategory,
  };

  const expense = enteredData;

    const [expenseItems, setExpenseItems] = useState([]);
    setExpenseItems([expense, ...expenseItems]);


  return (
    <View>
      {
        (title.disTitle,
        price.disPrice,
        category.disCategory ? <NewExpense /> : null)
      }
      {
        expenseItems.map(() => {
          <NewExpense key={enteredData.id} /> })
      }
    </View>
  );
};

标签： javascriptreactjsreact-native

解决方案

您在您的setExpenseItems内部直接调用您的组件，这将导致您的组件无限重新渲染，因为每当设置状态时，组件都会重新渲染。所以，它只会继续设置状态并重新渲染。

如果你想在组件加载后立即设置状态，你应该使用useEffect钩子。

像这样：

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

...

const title = useSelector(selectTitle);
const price = useSelector(selectPrice);
const category = useSelector(selectCategory);

const enteredData = {
    id: Math.random().toString(),
    title: title.disTitle,
    price: price.disPrice,
    category: category.disCategory,
  };

const expense = enteredData;

const [expenseItems, setExpenseItems] = useState([]);

useEffect(()=>{
    setExpenseItems([expense, ...expenseItems]);
},[])
...

注意我是如何调用setExpenseItemsinside 的useEffect。它setExpenseItems只会在组件第一次渲染时调用。useEffect 还接受依赖项列表，这将确定函数中指定的内容是否会运行。但是我传递了一个空数组作为我的依赖项。

请参阅此处，了解更多信息。

推荐阅读