Tengo un servidor simple que escucha en el puerto 8000 y todo lo que hace es devolver el nombre de los archivos dentro de un directorio en este formato:

 {'Files': ['file1', 'file2', ...]}

Tengo una aplicación React, que obtiene los datos usando el gancho useEffect y luego coloca la respuesta con el gancho useState .

El problema es que, en el primer intento, funciona perfectamente, y quizás en la segunda también, pero cuando actualizo por tercera vez (o más) ¡simplemente desaparece! y veo un mensaje de error en las herramientas de desarrollo de Chrome:

TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'mapa')

El código de reacción es:

 import './App.css'; import {useEffect, useState} from "react"; function App() { const [file, setFile] = useState(); useEffect(() => { async function fetchData() { const files = await fetch('http://localhost:8000/get_directory?dir=E:\\Learning\\LearningNetworking\\MD') const file_json = await files.json() setFile(file_json.File) } fetchData() }, []) return ( <div className="App"> <header className="App-header"> {file.map(file_name => <p>{file_name}<br/></p>)} </header> </div> ); } export default App;

Realmente no sé qué está pasando, ¿tal vez hay una condición de carrera y la aplicación de reacción intenta mostrar la lista antes de buscarla? ¿Pero el gancho React useEffect no sabe cuándo buscar de nuevo y cuándo no?

Intenté usar la fusión nula en esta línea:

 const file_json = await files.json() ?? []

en vez de:

 const file_json = await files.json()

El servidor (si es necesario por motivos de depuración) escrito en fastapi:

 from pathlib import Path from fastapi import FastAPI, Request from starlette.middleware.cors import CORSMiddleware app = FastAPI() app.add_middleware(CORSMiddleware, allow_origins=['*']) @app.get('/get_directory') def directory_tree(request: Request): path = request.query_params.get('dir', None) return {'Files': [file.name for file in Path(path).iterdir()]}

Estoy bastante seguro de que tengo algo mal aquí en mi comprensión de React, soy un novato, ¡así que agradecería su ayuda! Cualquier búsqueda en línea no encontró exactamente este problema (tal vez es porque no pude expresar el problema muy bien... ¡perdón si se ha preguntado antes!).