【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>

效果:

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