Hice esta tienda:
export class CommentStore { comments = [] constructor() { makeAutoObservable(this, {}, { autoBind: true }); } async loadPostComments(postId: number): Promise<void> { const res = await API.loadPostComments(postId); runInAction(() => { this.comments = res; }); } async sendComment(postId: number, comment: Comment): Promise<void> { try { await API.sendComment(postId, comment); await this.loadPostComments(postId); return true; } catch (err) { console.log('oops'); } } }¿Necesito usar await en los componentes de reacción? Por ejemplo:
useEffect(() => { (async function () { await loadPostComments(postId); })(); }, [loadPostComments, postId]);Pero esto también funciona bien:
useEffect(() => { loadPostComments(postId); }, [loadPostComments, postId]);Lo mismo para enviar comentario al hacer clic:
onClick={()=>{sendComment(postId, comment)}} onClick={async ()=>{await sendComment(postId, comment)}}Entonces, ¿es necesario usar await en estas situaciones?
Desea await algo solo si es necesario, por ejemplo, cuando la siguiente línea de código usa los datos de Promise. En el caso de useEffect que proporcionó, no es necesario y también en los controladores onClick
Sí, no es necesario escribir async/await en ellos. solo tiene que escribir la llamada asíncrona en las funciones y eso es suficiente.
por ejemplo:
const [posts, setPosts] = useState([]); useEffect(() => { const loadPost = async () => { // Await make wait until that // promise settles and return its result const response = await axios.get( "https://jsonplaceholder.typicode.com/posts/"); // After fetching data stored it in some state. setPosts(response.data); } // Call the function loadPost(); }, []);` no hay necesidad de escribir promesa y async / await en todo, recuerda ;P