Estoy creando una aplicación de chat simple, en App.js estoy guardando el historial de mensajes y en Screen.js manejo la entrada, etc.
El problema al que me enfrento es que cuando agrego un nuevo mensaje al historial, siempre sobrescribe el historial completo.
useEffect(() => {...}, [messages]); a App.js para verificar si se guardan nuevos mensajes, y lo están.console.log(messages) a addMsg() en App.js Y en Screen.js y descubrí que este archivo console.log siempre devuelve una matriz vacía.No tengo idea de por qué los mensajes devuelven datos en useEffect pero no dentro de la función addMsg ...
Aplicación.js
const [messages, addMessage] = useState([]); # this function is passed down as a prop to add new messages to the history const addMsg = (data) => { console.log(' old history', messages); return addMessage([...messages, data]); }; ... return ( <div className="App"> <Screen messages={messages} addMsg={addMsg} /> </div> )Así es como llamo a la función addMsg desde Screen.js:
props.addMsg(data);Pantalla.js:
function Screen(props) { useEffect(() => { console.log('props.messages', props.messages); // always returns [] }, [props.messages]); const sendMsg = (msg) => { let data = { timestamp: Date.now(), id: props.id, msg: msg, key: props.messages.length+1, }; props.addMsg(data); } return ( <div className="screen"> <div className="messages"> { props.messages.map(obj => { return <Row key={obj.key} id={obj.id} timestamp={obj.timestamp} msg={obj.msg} /> }) } </div> <Input id={props.id} send={sendMsg} /> </div> ) }Básicamente, simplemente paso un objeto a addMsg que luego se agrega a la matriz de historial (mensajes).
Soy relativamente nuevo en React y he estado atascado en esto durante horas...
Es una aplicación de chat simple. La matriz de mensajes contiene todos los mensajes (como un historial). Cuando agrego un nuevo mensaje, la matriz del historial se restablece, pero no sé por qué. Cuando agrego un mensaje, se agrega a la matriz de historial (lo probé con un controlador useEffect [mensajes]); pero también agregué un archivo console.log a la función addMessage que siempre me dice que mi matriz de historial está vacía... No tengo idea de por qué.
En su código, addMsg devuelve addMessage que es un setter de useState. Después de eso, los controladores useEffect se activan y ya tienen el valor actualizado.
Pero un setter useState no devuelve un valor, por lo que tendrá que ajustar la función addMsg para devolver un valor.
Es por eso que ve el valor modificado en useEffect y no lo devuelve addMsg
const addMsg = (data) => { console.log(' old history', messages); let newMessages = [...messages, data]; addMessage(newMessages); // After the setter call the 'messages' variable // is not yet updated, so use the 'newMessages' variable. return newMessages }; Ahora addMsg devuelve la nueva matriz.