Tengo una serie de mensajes de un bot y un usuario. Primero, se activa la función Agregar mensaje de bot, donde primero se agrega un mensaje del usuario y luego del bot después de 2 segundos.
Cuál es el problema: el mensaje del usuario (la función addUserMessage) funciona bien, pero después de 2 segundos agrega un mensaje del bot, pero al mismo tiempo elimina el mensaje del usuario.
Entiendo que setTimeout usa los datos antiguos de la matriz de mensajes y reescribe el mensaje del usuario
¿Como arreglarlo? Gracias
const [messages, addMessages]=useState([]); const addBotMessage=async (value, callback)=>{ addUserMessage(value, callback); setTimeout(()=>{ addMessages([...messages,{content:BotContent[callback], time:getTime(), author:'bot'}]); },2000) } const addUserMessage=(value, callback)=>{ if(!value) return; addMessages([...messages,{content:value, time:getTime(), author:'user'}]); }Prueba esto:
const [messages, addMessages]=useState([]); const addBotMessage=async (value, callback)=>{ addUserMessage(value, callback); setTimeout(()=>{ addMessages(prevMessages => { const nextMessages = [...prevMessages]; nextMessages.push({content:BotContent[callback], time:getTime(), author:'bot'}); return nextMessages; }); },2000) } const addUserMessage=(value, callback)=>{ if(!value) return; addMessages(prevMessages => { const nextMessages = [...prevMessages]; nextMessages.push({content:value, time:getTime(), author:'user'}); return nextMessages; }); }Si la única razón es tener algún retraso entre esos mensajes, lo haría de otra manera:
addUserMessage(value, callback); await new Promise(resolve => setTimeout(resolve, 2000)); addMessages([...messages,{content:BotContent[callback], time:getTime(), author:'bot'}]);De esa manera, solo retrasaría la adición del segundo comando mientras trabaja en el estado actual correcto.