Redux状态更新后元素未渲染问题求助（银行模拟项目）

问题场景 #

学习Redux时制作银行模拟项目，支持存取资金、添加客户功能。点击「Add client」按钮后，Redux状态已确认更新，但页面上新增的客户元素未被渲染。

核心错误原因 #

在App.js的客户列表渲染逻辑中，customers.map的回调函数没有返回JSX元素：

// 错误写法：大括号包裹但未return元素
{customers.map((customer) => {
  <div style={{ fontSize: "2rem" }}>{customer.name}</div>;
})}

箭头函数使用大括号{}时，必须显式用return返回内容；或者改用小括号()让JSX自动作为返回值。同时，React列表渲染需要为每个元素添加唯一key属性，这是React的性能优化要求，避免不必要的重渲染。

修正后的App.js关键代码 #

将客户列表渲染部分修改为：

{customers.length > 0 ? (
  <div>
    {customers.map((customer) => (
      <div key={customer.id} style={{ fontSize: "2rem" }}>{customer.name}</div>
    ))}
  </div>
) : (
  <div style={{ fontSize: "2rem" }}>No clients</div>
)}

额外优化提示 #

在customerReducer中，REMOVE_CUSTOMERS的处理逻辑存在错误，当前修改的是cash属性，实际应该操作customers数组：

// 错误写法
case "REMOVE_CUSTOMERS":
  return { ...state, cash: state.cash - action.payload };

// 修正写法（假设action.payload是客户id）
case "REMOVE_CUSTOMERS":
  return { 
    ...state, 
    customers: state.customers.filter(customer => customer.id !== action.payload) 
  };

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