Soy un principiante en React y recientemente me encontré con esta obtención de datos asincrónicos e intenté simularla usando Promise en el siguiente código. (La obtención de datos lleva tiempo, así que sí, debería usar setTimeout() con Promise, pero el código aquí es para simplificar)
function List({stories}) { console.log("Hi from List"); //Testing if component is rendered return(<> { stories.map(function(element) { return (<li>{element.title}</li>); }) } </>); } function App() { const stories=[ {title:"Alice in Wonderland"}, {title:"Beauty & the Beast"} ]; const [newStories,setNewStories]=React.useState([]); function wait() { console.log("Check"); //To see if code works here Promise.resolve({data:stories}); } React.useEffect(function() { wait().then(result=>setNewStories(result.data)) },[]); return( <> <h1>{"Titles"}</h1> <hr/> <List stories={newStories}/> <hr/> </> ); }El código anterior produce la salida deseada (solo durante medio segundo más o menos) y luego procede inmediatamente a dar una pantalla en blanco en blanco, pero cuando reemplazo lo siguiente, funciona perfectamente.
React.useEffect(function() { Promise.resolve({data:stories}).then(result=>setNewStories(result.data)) },[]);Mi pregunta es ¿por qué no funciona cuando Promise está dentro de una función y por qué aparece este "Error de tipo no detectado" para wait() ?
(El código imprime "Comprobar" en la consola, entonces, ¿por qué de repente afirma que la función no está definida?)
EDITAR Aparentemente tengo que poner una declaración de devolución allí
Gracias @Andy y otros
Primero, déjame mostrarte una guía de estilo para escribir mejor JavaScript: https://github.com/airbnb/javascript
Escribir un buen código JavaScript es esencial para que su código sea legible, no solo para usted sino para todos en StackOverflow y las personas con las que trabaja.
Las promesas están pensadas para la resolución asincrónica, por ejemplo, si está esperando un evento, como una solicitud de red para volver con una respuesta. Esto se debe a que al crear una solicitud de red, se activa un nuevo hilo para que el resto de su código JavaScript pueda ejecutarse en lugar de esperar la respuesta.
Las promesas no deben usarse cuando simplemente se devuelve un valor.
// ✅ Good code function wait() { return something } // 💩 Bad code function wait() { // (This is the correct way to write a Promise resolution) return new Promise(resolve => resolve(something)); } Además, si desea escribir una función asíncrona que devuelva una promesa, pero en realidad no está creando nuevos hilos, debe usar async / await :
async function wait() { return something; } La respuesta a su solución es simple. Su función de wait no devuelve nada. Simplemente crear una promesa no hará nada, tienes que devolverla.
function wait() { return Promise.resolve(something); }