Así que estoy tratando de obtener datos de esta https://fakestoreapi.com/products api pero parece que no obtengo los resultados. No sé si mi procedimiento está mal o me falta algo. Estoy usando next.js además de reaccionar con mecanografiado. Amablemente ayúdame. A continuación se muestra mi código para obtener los datos.
import React from 'react' interface Props { products: { id: number title: string price: string category: string description: string image: string }[] } export const getStaticProps = async () => { const response = await fetch("https://fakestoreapi.com/products") const jsonResponse = await response.json() console.log(jsonResponse); return { props: { products: jsonResponse } } } const FetchProducts = ({ products }: Props) => { return ( <div> <h1>fetchProducts</h1> {products.map(product => ( <div key={product.id}> {product.title} </div> ))} </div> ) } export default FetchProductsNo parece que esté llamando a su función getStaticProps , a menos que se haga en un código que no se muestra aquí.
Parece que deberías llamarlo en FetchProducts dentro de useEffect .
const FetchProducts = ({ products }: Props) => { useEffect(() => { const f = async () => { const p = await getStaticProps() // do something with p } f(); }, []); return ( <div> <h1>fetchProducts</h1> {products.map(product => ( <div key={product.id}> {product.title} </div> ))} </div> ) } El nombre de su componente es un poco confuso porque se llama FetchProducts , pero no obtiene nada y, en cambio, espera que los productos se pasen como accesorios.
Es posible que desee reconsiderar la forma en que FetchProducts recibe los productos. ¿Deberían pasarse los productos como accesorios, o FetchProducts debería realizar una solicitud cuando el componente se procesa para obtener productos? El ejemplo anterior obtendría los productos cuando el componente se procesa, lo que significa que no necesitaría un apoyo para los products .