搭建网页版 ChatGPT（二）

前言

我们继续上一篇的内容，在上一篇我们简单分析了 ChatGPT 问答实现思路以及遇到的问题，这里我来简要概括下在上一篇我们遇到的问题，

那就是在 ChatGPT 逐字返回时如何在 chatList 中找到那条对应的对话并将返回的每个字拼在那条对话的后面形成打字机的效果。

ChatGPT 对话

基于上面的问题，为了定位到 chatList 中我们想要的那条对话，我们可以给每次对话加一个 chatId，用来标识这次对话，

也就是说这个 chatId 要具有唯一性，那我们可以用时间戳来当 chatId，具体实现就是在 ChatGPT 第一次回答时就生成这个 chatId，

然后后面逐字返回的时候在每次调用 reply 方法的时候带上这个 chatId，用这个 chatId 在 chatList 中定位到我们想要的那条对话，

如果找不到那就 push 一个新的对话，如果能找到那就将此次返回的字拼接在原来的内容后面，这样就完美的解决了我们的问题，下面来看下此时的代码：

const reply = (response: any, chatId: string) => {
  if (response) {
    setChatList((prevChatList: any) => {
      let found = false;
      const updatedChat: any = prevChatList.map((item: any) => {
        if (item.chatId === chatId) {
          found = true;
          return { ...item, content: response };
        }
        return item;
      });

      if (!found) {
        updatedChat.push({
          chatId: chatId,
          content: response,
          type: 'bot',
        });
      }
      return [...updatedChat];
    });
  }
};

最后

1. 总结下，我们通过给每个对话添加唯一的 chatId 解决了在逐字输出的时候能在 chatList 中定位到我们想要的那条对话。

2. 其实这里还忽略了一个点没有讲，我们都知道 useState 是异步更新的，那你看我写的那部分查找逻辑都是放在 setChatList 回调函数中的，这样就可以拿到最新的 chatList 数据了。