React中正确渲染JSON数据：组件通信与状态管理实践

// Produto.jsx (原始错误代码片段)
import prod from "../../data/produtos.json"; // 此处不应直接导入

export default function Produto(props) {
  return (
    <figure>
      <img src={prod.imagem}></img> // 错误：应使用props.imagem
      <figcaption>(prod.titulo)</figcaption> // 错误：应使用{props.titulo}
      <p>(prod.preco)</p> // 错误：应使用{props.preco}
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

// Produto.jsx (修正后)
export default function Produto(props) {
  return (
    <figure>
      {/* 使用 props 访问数据，并为图片添加 alt 属性以提高可访问性 */}
      <img src={props.imagem} alt={props.titulo || "产品图片"}></img>
      {/* 使用花括号 {} 包裹动态 JSX 表达式 */}
      <figcaption>{props.titulo}</figcaption>
      <p>{props.preco}</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

// Produtos.jsx (原始错误代码片段)
import productions from "../data/produtos.json"; // 直接初始化 state

export default function Produtos(props) {
  const [lista, setLista] = useState(productions); // 直接使用导入的数据初始化
  return (
    <div className="produtos">
      {lista.map((product) => (
        <div className="Products"> {/* 缺少 key 属性 */}
          <Produto id={product.id} {...product} />
        </div>
      ))}
    </div>
  );
}

// Produtos.jsx (修正后)
import "./Produtos.css";
import productions from "../data/produtos.json"; // 导入本地 JSON 文件
import Produto from "./Produto";
import { useEffect, useState } from "react";

export default function Produtos() {
  const [lista, setLista] = useState([]); // 初始化为空数组

  useEffect(() => {
    // 在组件挂载后，将导入的数据设置到状态中
    setLista(productions);
  }, []); // 空依赖数组表示只在组件初次渲染时运行一次

  return (
    <div className="produtos">
      {lista.map((product) => (
        // 在列表渲染时，为每个元素提供一个唯一的 key 属性
        // key 属性应尽可能稳定且唯一，通常使用数据的 id
        <Produto key={product.id} {...product} />
      ))}
    </div>
  );
}

// products.json
[
  { "id": 1, "titulo": "产品A", "preco": 16.9, "imagem": "/imagens/productA.jpg" },
  { "id": 2, "titulo": "产品B", "preco": 26.89, "imagem": "/imagens/productB.jpg" }
]

// Produtos.jsx
import productions from "../data/produtos.json"; // 同步导入

// ... (如上文所示的 useEffect 逻辑)
useEffect(() => {
  setLista(productions);
}, []);

// Produtos.jsx (使用异步 fetch API)
import "./Produtos.css";
import Produto from "./Produto";
import { useEffect, useState } from "react";

export default function Produtos() {
  const [lista, setLista] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProdutos = async () => {
      try {
        setLoading(true);
        // 假设 '../data/produtos.json' 是一个可访问的公共路径或API端点
        const response = await fetch("../data/produtos.json");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const produtos = await response.json();
        setLista(produtos);
      } catch (e) {
        setError(e);
        console.error("Failed to fetch products:", e);
      } finally {
        setLoading(false);
      }
    };

    fetchProdutos();
  }, []);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>加载失败: {error.message}</p>;

  return (
    <div className="produtos">
      {lista.map((product) => (
        <Produto key={product.id} {...product} />
      ))}
    </div>
  );
}