React组件中JSON数据渲染不显示问题及最佳实践

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

// Produtos.jsx
import "./Produtos.css";
import productionsData from "../data/produtos.json"; // 仅在父组件中导入一次JSON数据
import Produto from "./Produto";
import { useEffect, useState } from "react";

export default function Produtos() {
  // 使用useState管理产品列表状态，初始值设为空数组
  const [lista, setLista] = useState([]);

  // 使用useEffect在组件挂载后加载数据
  useEffect(() => {
    // 假设productionsData是直接导入的JSON数组
    setLista(productionsData);
    // 依赖项数组为空，表示只在组件初次渲染后执行一次
  }, []);

  return (
    <div className="produtos">
      {lista.map((product) => (
        // 在map方法中为每个渲染的组件提供唯一的key属性
        // 通过展开运算符 {...product} 将product对象的所有属性作为props传递给Produto
        <Produto key={product.id} {...product} />
      ))}
    </div>
  );
}

// Produtos.jsx (异步加载示例)
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 fetchProducts = async () => {
      try {
        setLoading(true); // 开始加载，设置加载状态为true
        const response = await fetch("../data/produtos.json"); // 假设这是API路径
        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); // 无论成功失败，加载结束
      }
    };

    fetchProducts();
  }, []); // 依赖项数组为空，确保只在组件初次渲染后执行一次

  if (loading) return <p>加载中...</p>;
  if (error) return <p>加载产品失败: {error.message}</p>;
  if (lista.length === 0) return <p>暂无产品数据。</p>;

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