React新手求助：如何将useState存储的对象数组渲染到HTML页面

你遇到的报错是因为React不支持直接将普通对象作为子元素渲染，问题出在两个位置：

• 你自定义的ProductItem组件直接把接收的props对象当成了商品数据渲染，props本身是包含所有传入属性的对象，你传入的value只是props的其中一个属性
• 原有商品数组里的图片字段不统一，且图片被包裹在对象中，直接渲染也会触发对象渲染报错

1. 修正productitem.js组件逻辑 #

不需要修改你传入组件的调用方式，只需要调整组件内部的参数接收和渲染逻辑，兼容现有数据结构：

function ProductItem(props) {
  // 取出传入的商品数据
  const product = props.value;
  // 兼容商品图片字段不统一的问题
  const imageWrap = product.gambar || product.image;
  // 取出被包裹在对象里的图片资源
  const imageSrc = Object.values(imageWrap)[0];
  
  return (
    <div className="product-card">
      <img src={imageSrc} alt={product.menu} style={{width: '200px'}} />
      <p>菜品名称：{product.menu}</p>
      <p>售价：{product.harga} 印尼盾</p>
    </div>
  );
}
export default ProductItem;

2. 修正Soal2组件的渲染结构 #

你原有return里的标签结构错误（开头多了闭合div），补充导入ProductItem后放入遍历逻辑即可，原有listProducts的定义完全不动，符合你的要求：

import React, {useState}  from 'react';
import './Soal2.css';
import hamburger from './products/humburger.jpg';
import kimchi from './products/kimchi.jpg';
import topokki from './products/topokki.jpg'
import sushi from './products/sushi.jpg';
// 导入商品项组件
import ProductItem from './productitem';

function Soal2() {
  // 原有定义完全保留未修改
  const [listProducts, setListProducts] = useState([{
    menu: 'Humburger',
    gambar: {hamburger},
    harga: 10000
  },
  {
  menu: 'Kimchi',
  image: {kimchi},
  harga: 15000
  },
  {
  menu: 'Topokki',
  gambar: {topokki},
  harga: 20000
  },
  {
  menu: 'Sushi',
  gambar: {sushi},
  harga: 25000
  }])

  return (
    <div className="soal2-container">
      {/* 遍历渲染商品列表 */}
      {listProducts.map((item, index) => {
        return <ProductItem value={item} key={index}/>
      })}
    </div>
  );
}
  
export default Soal2;

内容的提问来源于stack exchange，提问作者Firsty Ukhti Molyndi