settimeout 使用旧数据

Question

我有一组来自机器人和用户的消息消息。首先，触发添加Bot Message 功能，首先添加来自用户的消息，然后在2 秒后添加来自bot 的消息。

问题是什么：来自用户的消息（addUserMessage 函数）工作正常，但 2 秒后它添加了来自机器人的消息，但同时删除了用户的消息。

我了解到setTimeout使用消息数组的旧数据并重写了来自用户的消息

如何解决？谢谢

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'}]);
}

Answer 1

试试这个：

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;
});
}

Answer 2

如果唯一的原因是在这些消息之间有一些延迟，我会用另一种方式来做：

addUserMessage(value, callback);
await new Promise(resolve => setTimeout(resolve, 2000));
addMessages([...messages,{content:BotContent[callback], time:getTime(), author:'bot'}]);

这样你就可以在正确的当前状态下延迟添加第二个命令。

settimeout 使用旧数据

Settimout use old data

javascript

settimeout

reactjs