React组件无法渲染JSON数据，寻求代码排查帮助

架构老林

2026-7-19

React渲染商品数据失败的问题排查与修复

核心问题分析

Produto组件未使用父组件传递的props：你在Produto组件里直接导入了整个produtos.json数组，而非使用父组件通过{...product}传递的单个产品数据，导致所有商品都试图读取整个数组的属性，而非当前产品的属性。
JSX插值语法错误：<figcaption>和<p>标签里用了普通圆括号(prod.titulo)，这会被当作纯文本渲染，正确的JSX变量插值必须用花括号{}。
img标签未正确闭合：React的JSX要求标签必须闭合，<img src={...}>需写成<img src={...} />。
JSON数据字段缺失：所有产品的titulo字段为空，即使修复代码，标题区域也不会显示内容，需填充真实产品标题。

修复后的代码

Produto组件

// 无需导入produtos.json，直接使用父组件传递的props
export default function Produto(props) {
  return (
    <figure>
      <img src={props.imagem} alt={props.titulo || "商品图片"} />
      <figcaption>{props.titulo || "无标题"}</figcaption>
      <p>R$ {props.preco.toFixed(2)}</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

Produtos组件

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useState } from "react";

export default function Produtos(props) {
  const [lista, setLista] = useState(productions);
  return (
    <div className="produtos">
      {lista.map((product) => (
        // 添加唯一key，符合React列表渲染规范
        <div className="Products" key={product.id}>
          <Produto {...product} />
        </div>
      ))}
    </div>
  );
}