【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 nullreturn (<Sidebarlist={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"><ItemIconclassName={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}<TrashIcononClick={() => handleDelete(item.id)}className="h-5 w-5 text-blue-400 hover:text-blue-700 cursor-pointer"aria-hidden="true"/></div>

效果:

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