0
119
VistasReaccionar múltiples cambios de estado con retraso
Estoy tratando de agregar varios elementos a una lista donde cada elemento se agrega después de un cierto retraso, pero cuando uso setState parece que no cambia el estado o no vuelve a representar los componentes, me gustaría saber por qué sucede esto.
import React, { useState } from 'react'; import './App.css'; function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }; function App() { const [messages, setMessages] = useState([]); const createMessages = async () => { for (let i = 0; i < 10; ++i) { console.log("test"); setMessages([...messages, "test"]); await sleep(1000); } }; return ( <div id="App"> <button onClick={createMessages}>Create Messages</button> <div> {messages.map((message, index) => <p key={index}>{message}</p>)} </div> </div> ); } export default App; 
1 Respuestas
Responde la pregunta0
Use la devolución de llamada dentro de setState para configurar sus mensajes. En este momento está llamando a createMessages y hay una matriz vacía en los mensajes y ese es el valor que usa su función. Entonces, la razón por la que solo ve un elemento en la matriz es porque cada vez que establece el estado hay una matriz vacía, luego agrega la test a la matriz y el componente se vuelve a representar y solo muestra una prueba. Así que haz esto cuando establezcas tu estado:
setMessages(prevMessages => [...prevMessages, "test"]);Ahora utilizará el valor correcto al establecer su estado.