React应用状态更新后UI未渲染问题：元素已添加至数组但界面无变化

嘿，我一眼就发现你代码里的问题啦！你添加元素到数组的逻辑是对的，但UI没更新的核心原因是你给Expense组件传递的不是响应式的state数据。

问题所在 #

在你的App.jsx的return部分，你是这么给Expense组件传值的：

<Expense items={expenseItem} />

这里的expenseItem是你一开始定义的常量数组，和你用useState创建的响应式expenses state完全没关系。React只会监听state的变化来触发组件重新渲染，所以哪怕你通过newExpenseItem更新了state里的expenses，Expense组件用的还是原始的常量数组，自然不会更新UI。

解决方法 #

只需要把传递给Expense组件的items值改成state里的expenses就行：

return (
  <div id="root">
    <NewExpense addExpenseToArray={addExpense}/>
    <Expense items={expenses} /> {/* 这里把expenseItem替换成expenses */}
  </div>
);

补充说明 #

React的state是响应式的核心，只有当组件依赖的state发生变化时，React才会重新渲染组件并更新UI。你之前一直用的是初始的静态数组，完全脱离了state的响应式体系，所以不管你怎么更新state，UI都不会有变化。

另外，顺便提个小建议：在使用map渲染列表时，最好给每个元素加上唯一的key属性，比如：

{props.items.map((expense) => (
  <ExpenseItem 
    key={`${expense.title}-${expense.date.getTime()}`} 
    title={expense.title} 
    amount={expense.amount} 
    date={expense.date} 
  />
))}

这能帮助React更高效地识别列表元素的变化，避免不必要的性能损耗和警告。

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