React函数组件中setState更新数组后UI未渲染的问题

1. 检查列表key的唯一性 #

React靠key来区分列表中的不同元素，如果新增支出项的id和已有项重复（比如没生成唯一标识），React会判定这是同一个元素，不会渲染新条目。

• 解决方法：确保每个新支出项都有唯一id，可以用时间戳或uuid生成：

  // 生成新支出时添加唯一id示例
  const newExpense = {
    id: Date.now().toString(), // 或者使用uuid库的uuid.v4()
    title: "xxx",
    amount: 100,
    date: new Date()
  };
  

2. 确认状态初始化正确性 #

检查expenseItems是否通过useState正确初始化为空数组：

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

如果初始值不是数组，会导致map方法无法执行。

3. 验证expense对象的完整性 #

确认传递给saveExpense的expense对象包含所有必填字段：id、title、amount、date。如果某个字段缺失（比如id为undefined），不仅会让key失效，还可能导致子组件渲染异常。

额外提示（非当前问题，但后续可能遇到） #

你在ExpenseItems组件中用本地状态保存title，初始值取自props.title，但后续父组件更新title属性时，本地状态不会自动同步。如果需要同步，可添加useEffect：

import { useEffect } from 'react';

function ExpenseItems(props){
    const [title,setTitle]=useState(props.title);

    useEffect(() => {
      setTitle(props.title);
    }, [props.title]); // 当props.title变化时更新本地状态

    // 其余代码不变
}

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