He obtenido correctamente los productos. Pero cuando registro en la consola, muestra nulo y luego muestra la matriz de 10 productos.
const [datas,setDatas]=useState(null); const [loading,setLoading]=useState(false); useEffect(()=>{ fetch('products.json') .then(result =>result.json()) .then(data => setDatas(data)); setLoading(true); },[]); console.log(datas);//no error occured[![Muestra productos nulos y 10][1]][1]
Pero cuando accedo al índice 0 de la matriz de datos , ¡muestra un error! aquí está mi código
const [datas,setDatas]=useState(null); const [loading,setLoading]=useState(false); useEffect(()=>{ fetch('products.json') .then(result =>result.json()) .then(data => setDatas(data)); setLoading(true) },[]); console.log(datas[0]);//error occured [![error occured][2]][2] [1]: https://i.stack.imgur.com/IFbqd.png [2]: https://i.stack.imgur.com/CD1AH.pngEl resultado suele estar envuelto en un tipo con propiedades como esta;
export type ResponseResult<T> = { status: number; message?: string; data?: T; success?: boolean; }; Reemplace setDatas(data)); con setDatas(data.data)); y ver si eso funciona mejor.
También es posible que tenga problemas ya que la llamada es asíncrona; no se garantiza que tenga los datos listos a menos que inicie sesión en la parte .then() de la llamada.
Algo como
fetch('products.json') .then(result =>result.json()) .then(x => { setDatas(x.data); console.log(datas); }); setLoading(true);...Deberia trabajar.
Como la respuesta de la API y el estado de configuración son asíncronos, debe verificar que los datos del estado no estén indefinidos, simplemente cambie la línea a:
if(datas && datas.length>0) console.log(datas[0]);