React not rendering JSON

I have the following codes that was supposed to render data from a json file. It doesn't display me anything, except the h1 with the curly braces, instead of the data wanted. here is the code:

import prod from "../../data/produtos.json";

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

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) => (
        <div className="Products">
          <Produto id={product.id} {...product} />
        </div>
      ))}
    </div>
  );
}

[
  {
    "id": 1,
    "titulo": "",
    "preco": 16.9,
    "imagem": "../public/imagens/pwero.jpg"
  },
  {
    "id": 2,
    "titulo": "",
    "preco": 26.89,
    "imagem": "../public/imagens/oepw.jpg"
  },
  {
    "id": 3,
    "titulo": "",
    "preco": 17.4,
    "imagem": "../public/imagens/ewer.jpg"
  },
  {
    "id": 4,
    "titulo": "",
    "preco": 2.2,
    "imagem": "/////w"
  },
  {
    "id": 5,
    "titulo": "",
    "preco": 49.99,
    "imagem": ""
  },
  {
    "id": 6,
    "titulo": "",
    "preco": 5.99,
    "imagem": "zzzzys"
  }
]
=

it should be rendering the json data. I don't know if the problem is in the map. The json file is imported right in both components.

In Produto, you need to access props (not prod) and use curly brackets {}. You should not be importing/loading any JSON at this point.

export default function Produto(props) {
  return (
    <figure>
      <img src={props.imagem} alt={props.titulo}></img>
      <figcaption>{props.titulo}</figcaption>
      <p>{props.preco}</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

I would initialize the lista state with an empty array and use an effect to either fetch it (recommended), or load it from the JSON file. Also, if you use Array.prototype.map, you should supply a key prop.

import "./Produtos.css"
import productions from "../data/produtos.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) => (
        <Produto key={product.id} id={product.id} {...product} />
      ))}
    </div>
  );
}

You could alternatively load the JSON asynchronously.

useEffect(() => {
  (async () => {
    const response = await fetch("../data/produtos.json");
    const produtos = await response.json();
    setLista(produtos);
  })();
}, []);

try adding a return statement in the map.

Here is the snippet for the code :

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) => {
       return (
        <div className="Products">
          <Produto id={product.id} {...product} />
        </div>
       )})}
    </div>
  );
} 

</details>



# 答案3
**得分**: 0

1- 你不需要将数据导入到你的 **Produto** 组件中。其代码应为：

```jsx
export default function Produto({ prod }) {
    return (
        <figure>
            <img src={prod.imagem}></img>
            <figcaption>{prod.titulo}</figcaption>
            <p>{prod.preco}</p>
            <button className='btn'>Adicionar ao carrinho</button>
        </figure>
    )
}

不要将 js 指令放在 括号 () 中，而是应该放在 花括号 {} 中。

2- 至于 Produtos 组件，你只需将产品作为 Produto 组件的属性传递即可：

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 => (
                <div className="Products">
                    <Produto id={product.id} prod={product}/>
                </div>
            ))}
        </div>
    )
}

export default function Produto({ prod }) {
    return(
        <figure>
            <img src={prod.imagem}></img>
            <figcaption>{ prod.titulo }</figcaption>
            <p>{ prod.preco }</p>
            <button className='btn'> Adicionar ao carrinho </button>
            
        </figure>
    )
}

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 => (
                  <div className="Products">
                    <Produto id={product.id}  prod={product}/>
                  </div>
                ))}            
        </div>
 )
    }