React+Django项目报Objects are not valid as a React child错误怎么解决？

1. "Objects are not valid as a React child"报错解决 #

这个报错的核心原因是你在JSX代码中直接将整个购物车商品对象作为内容渲染，没有取出对象的基础类型属性。你当前贴出的CartScreen组件没有渲染购物车列表相关内容，所以报错出现在项目其他引用了cart状态的组件中：

• 找到所有通过useSelector获取cart数据的组件，排查所有JSX中直接写{cartItem}、{cart.cartItems}的代码
• 改为读取对象中的具体属性渲染，示例如下：

// 错误写法
<div>{cartItem}</div>

// 正确写法
<div>
  <p>商品名：{cartItem.title}</p>
  <p>单价：{cartItem.price}</p>
  <p>购买数量：{cartItem.qty}</p>
</div>

• 如果要渲染购物车列表，需要对cartItems数组调用map方法遍历渲染，注意给列表项加唯一key属性：

{cart.cartItems.map(item => (
  <div key={item.bookId}>
    <img src={item.image} alt={item.title} />
    <p>{item.title}</p>
    <span>¥{item.price} × {item.qty}</span>
  </div>
))}

2. 本地存储未生效+Redux状态更新异常修复 #

你的购物车reducer存在两处核心错误，直接导致状态更新异常、本地存储写入失败：

错误1：原地修改原state，违反Redux纯函数规则 #

更新已存在的购物车商品时，你直接修改了原state中的cartItems数组，返回的数组引用和旧状态完全相同，Redux无法检测到状态变化，同时action中调用getState拿到的还是未更新的旧数据，导致写入localStorage的内容不正确。

错误2：缺少default分支 #

reducer没有处理未知action的默认逻辑，Redux初始化时会返回undefined，导致状态异常。

修复后的reducer代码： #

export const cartReducer = (state = { cartItems: [] }, action) => {
  switch (action.type) {
    case "CART_ADD_ITEM":
      const item = action.payload
      const existItem = state.cartItems.find(x => x.bookId === item.bookId)
      if (existItem) {
        // 生成全新数组，不修改原state
        return {
          ...state,
          cartItems: state.cartItems.map(x => 
            x.bookId === existItem.bookId ? item : x
          )
        }
      } else {
        return {
          ...state,
          cartItems: [...state.cartItems, item]
        }
      }
    // 必须添加default分支返回原state
    default:
      return state
  }
}

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