React中如何访问路由传递的嵌套状态对象的单个内容？

问题背景 #

通过路由导航将购物车商品状态传递到支付页后，得到一个嵌套对象，这是此前购物车功能问题的后续场景。

核心需求 #

需要访问该嵌套对象的内容并转换成易读格式：

• 单独获取并展示totalPrice的数值
• 渲染内层cartItems数组中的所有商品信息

遇到的问题 #

尝试用Object.keys(obj).map((key) => ()遍历对象时，无法正常展示totalPrice和cartItems的内容：

• 直接渲染data[key]时，因cartItems是数组/对象，触发React错误：Objects are not valid as a React child
• 错误遍历方式导致无内容展示
  目前只能通过JSON.stringify(data)临时查看对象结构。

当前展示效果：

目标展示效果：

现有代码（PaymentPage.jsx） #

import React from "react";
import { useNavigate, useLocation } from "react-router-dom";

export default function PaymentPage(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const navigateToHomeOrderPage = () => {
    navigate("/");
  };

  const data = location.state;  // 路由传递的嵌套对象

  return (
    <aside className="block col-1">
      <button
        sx={{ width: 10 }}
        style={{ maxWidth: "60px" }}
        onClick={navigateToHomeOrderPage}
      >
        Go back
      </button>
      <h2>PAYMENT PAGE</h2>
      {/* 临时展示对象结构 */}
      <pre sx={{ ml: 120 }}>{JSON.stringify(data)}</pre>

      {/* 以下是尝试过的错误写法：
      {Object.keys(data).map((key) => (
          <h3>
            {key}: {data[key]}
          </h3>
        ))}
        报错：Objects are not valid as a React child (found: object with keys {id, name, price, image, qty}). If you meant to render a collection of children, use an array instead.
        
      {Object.keys(data).map((keys) => {
        return <h1>{data[keys].name}</h1>;
      })} 
      无报错但无内容展示
      */}
    </aside>
  );
}

解决方案及代码调整 #

从对象结构可知，data包含两个明确属性：totalPrice（数值）和cartItems（商品对象数组），无需用Object.keys遍历整个对象，直接针对性处理即可：

1. 增加空值判断：防止直接访问支付页时location.state为空导致报错
2. 直接渲染totalPrice：数值类型可直接在React中渲染
3. 遍历cartItems数组：用map遍历每个商品对象，渲染所需字段

修改后的完整代码：

import React from "react";
import { useNavigate, useLocation } from "react-router-dom";

export default function PaymentPage(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const navigateToHomeOrderPage = () => {
    navigate("/");
  };

  const data = location.state;

  // 若没有传递数据，提示用户
  if (!data) {
    return (
      <aside className="block col-1">
        <button onClick={navigateToHomeOrderPage}>Go back</button>
        <h2>PAYMENT PAGE</h2>
        <p>No cart data found, please go back to add items.</p>
      </aside>
    );
  }

  return (
    <aside className="block col-1">
      <button
        sx={{ width: 10 }}
        style={{ maxWidth: "60px" }}
        onClick={navigateToHomeOrderPage}
      >
        Go back
      </button>
      <h2>PAYMENT PAGE</h2>

      {/* 展示总价 */}
      <div style={{ margin: "1rem 0" }}>
        <h3>Total Price: ${data.totalPrice.toFixed(2)}</h3>
      </div>

      {/* 展示购物车商品列表 */}
      <div>
        <h3>Cart Items:</h3>
        <ul style={{ listStyle: "none", padding: 0 }}>
          {data.cartItems.map((item) => (
            <li 
              key={item.id} 
              style={{ border: "1px solid #eee", padding: "0.5rem", margin: "0.5rem 0" }}
            >
              <p><strong>Name:</strong> {item.name}</p>
              <p><strong>Price:</strong> ${item.price.toFixed(2)}</p>
              <p><strong>Quantity:</strong> {item.qty}</p>
              {/* 若需要展示图片，可以添加img标签 */}
              {/* <img src={item.image} alt={item.name} style={{ width: "50px" }} /> */}
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}

关键说明 #

• 空值判断：避免直接访问支付页时data为undefined导致的渲染错误
• 总价格式化：用toFixed(2)确保金额显示两位小数
• 商品列表渲染：通过cartItems.map遍历每个商品，用item.id作为key（React列表渲染要求唯一key），按需渲染商品的名称、价格、数量等字段

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