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

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

1.增加删除对话项的函数

hooks\use-conversation.ts

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

2.父组件中通过props解构出

deleteConversation

并传入子组件

Sidebar

app\components\index.tsx

constrenderSidebar=()=>{if(!APP_ID||!APP_INFO||!promptConfig)returnnullreturn(<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()consthandleDelete=(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>

效果:

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