Necesito averiguar cómo obtener varios archivos GeoJSON de mi carpeta pública y representar las coordenadas en un componente React. Aquí está el fragmento de código relevante:

 export const CoordinatesComponent = () => { const [data, setData]: any = useState([]); const [isLoading, setLoading] = useState(true); useEffect(() => { let isMounted = true; const dataPromises = Promise.all([ fetch("data/boundary.json", { headers: { "Content-Type": "application/json", Accept: "application/json", }, }), fetch("data/neighborhoods.json", { headers: { "Content-Type": "application/json", Accept: "application/json", }, }), ]) .then((response) => response.map((a) => a.json())); const setState = () => { if (isMounted) { dataPromises.then((a) => setData(a)); setLoading(false); } return () => { isMounted = false; }; }; setState(); }, []); if (isLoading) { return <div>Loading...</div>; } return ( <div>{data}</div> // Just a placeholder. This array of geoJson objects would be fed into another component ); };

Si bien puedo hacer esto con una sola operación de búsqueda, estoy luchando para que esto funcione con Promise.all. Cuando consuelo. registro la variable de datos, veo una matriz de objetos indefinidos. ¡Cualquier ayuda sería muy apreciada!