【React】实现消息列表的删除

工作小记，第一次接触react项目

---

1.增加删除对话项的函数
hooks\use-conversation.ts

  // 删除对话项的函数
  const deleteConversation = (id: string) => {
    setConversationList(prevList => prevList.filter(item => item.id !== id))
  }
  return {
	deleteConversation,
	...
}

---

2.父组件中通过props解构出deleteConversation并传入子组件Sidebar
app\components\index.tsx

const renderSidebar = () => {
    if (!APP_ID || !APP_INFO || !promptConfig)
      return null
    return (
      <Sidebar
        list={conversationList}
        onCurrentIdChange={handleConversationIdChange}
        currentId={currConversationId}
        copyRight={APP_INFO.copyright || APP_INFO.title}
        onDelete={deleteConversation} // 传入 deleteConversation 函数
      />
    )
  }

---

3.子组件Sidebar中传入方法,实现删除功能

const Sidebar: FC<ISidebarProps> = ({
  copyRight,
  currentId,
  onCurrentIdChange,
  list,
  onDelete,
}) => {
  const { t } = useTranslation()
  const handleDelete = (id: string) => {
    //console.log('Deleting conversation with id:', id)
    onDelete(id)
  }
  ...

修改消息列表的显示

 <div className="flex items-center justify-between w-full">
                <ItemIcon
                  className={classNames(
                    isCurrent
                      ? 'text-primary-600'
                      : 'text-gray-400 group-hover:text-gray-500',
                    'mr-3 h-5 w-5 flex-shrink-0',
                  )}
                  aria-hidden="true"
                />
                {item.name}
                <TrashIcon
                  onClick={() => handleDelete(item.id)}
                  className="h-5 w-5 text-blue-400 hover:text-blue-700 cursor-pointer"
                  aria-hidden="true"
                />
              </div>

效果:

但是消息列表式存在服务器上，页面一刷新之后消息列表又出现了，明天还得对齐接口。

---

8.14更新
修复bug:
1.只剩一个消息队列时将无法删除
2.点击删除按钮时若正在生成回复,删除操作的优先级更高,会阻塞回答后一次性生成

  const handleDeleteConversation = async (id: string) => {
    try {
      // 检查 ID 是否有效
      if (id === '-1') {
        // 如果 ID 是 -1，直接从本地列表中删除，不发送请求
        setConversationList(prevList => prevList.filter(item => item.id !== id))
        console.log('新建对话未保存，直接从列表中删除')
        return
      }

      // 如果列表中只有一项，不允许删除
      if (conversationList.length <= 1) {
        console.error('无法删除，因为对话列表中只有一项。')
        return
      }

      // 调用删除对话的 API
      await deleteConversation(id)

      // 更新本地状态，移除已删除的对话
      setConversationList(prevList => prevList.filter(item => item.id !== id))

      // 如果删除的是当前对话，选择另一个对话或清空当前对话
      if (currConversationId === id) {
        if (conversationList.length > 1) {
          const nextConversation = conversationList.find(item => item.id !== id)
          if (nextConversation)
            handleConversationIdChange(nextConversation.id)
        }
        else {
          handleConversationIdChange('') // 如果只有一项且已删除，清空当前对话
        }
      }
    }
    catch (error) {
      console.error(`删除对话失败 id为 ${id}:`, error)
    }
  }