React/React Native报Too many re-renders，新增消费项到列表顶部如何修复？

• 你直接在组件顶层同步调用setExpenseItems，React组件每次渲染都会执行这行代码修改状态，状态修改又会触发组件重新渲染，形成无限循环，就触发了重渲染次数限制的报错。
• 同时你的列表渲染逻辑也存在问题：map遍历没有返回组件，且所有列表项的key都用了同一个enteredData.id，会导致渲染异常。

你需要把新增消费记录的逻辑放到useEffect钩子中，只监听Redux中消费数据的变化，且只有数据有效时才往列表头部添加新记录，同时修正列表渲染逻辑：

import React, { useState, useEffect } from "react";
import { View } 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 [expenseItems, setExpenseItems] = useState([]);

  // 只在依赖的消费数据变化时才执行新增逻辑
  useEffect(() => {
    // 先判断数据是否有效，避免添加空记录
    const isDataValid = title.disTitle && price.disPrice && category.disCategory;
    if (isDataValid) {
      const newExpense = {
        id: Math.random().toString(),
        title: title.disTitle,
        price: price.disPrice,
        category: category.disCategory,
      };
      // 新记录放数组头部，函数式更新保证拿到最新的列表状态
      setExpenseItems(prevItems => [newExpense, ...prevItems]);
    }
  }, [title, price, category]); 

  return (
    <View>
      {/* 遍历expenseItems渲染每一条消费记录，用每一项自身的id当key */}
      {expenseItems.map(item => (
        <NewExpense key={item.id} expenseData={item} />
      ))}
    </View>
  );
};

补充说明 #

如果你的NewExpense组件需要接收消费数据展示，把遍历得到的item作为props传进去，对应修改NewExpense的参数接收逻辑即可。

内容的提问来源于stack exchange，提问作者Dhruv