删除行时反应表重新渲染表

如何解决删除行时反应表重新渲染表

我在我的项目中使用 react-table 并且我有一个按钮来删除该行。它工作正常，但是当行被删除时，表格会重新呈现（在分页、搜索过滤器等中丢失当前页面）有没有办法防止这种情况发生？

我的代码：

const Taxis = ({data}) => {

     const [taxis,setTaxis] = useState([...data])


     const columns = useMemo(() => [
     {
          Header: 'Active',accessor: 'active',Cell: ({ value }) => {
               return <p className="flex justify-end md:block"><Icon path={value ? mdiCheck : mdiClose} size={1} className={`md:mx-auto ${value ? 'text-green-400' : 'text-red-400'}`}/></p>  
          }
     },{
          Header: 'Acciones',accessor: 'actions',Cell: ({row}) => {
               return <><div className="flex justify-end md:justify-center pb-2 md:pb-0">
                    <div className="group relative">
                         <button className="flex rounded-md p-1 text-primary border border-primary hover:border-secondary hover:text-secondary mr-2">
                              <Icon path={mdiPencil} size={1} />
                         </button>
                         <span className="absolute hover-sibling:opacity-100 z-30 w-20 right-2 opacity-0 bg-white rounded-lg shadow-lg text-primary px-2 py-1 mt-1 border border-gray-200 text-center text-sm">
                              Editar taxi
                         </span>
                    </div>
                    <div className="relative">
                         <button className="flex text-blanco border border-primary hover:border-secondary rounded-md p-1 bg-primary hover:bg-secondary" 
                           onClick={() => {/*this is my function to delete*/
                             const data = await fetch(`${APP_CONSTANTS.REST_API}`,{
                                method: "DELETE"
                             })
                             if (data.ok) {
                               setTaxis(taxis.filter( taxi => taxi.idtaxi !== row.original.idtaxi))
                             }
                           }}>
                              <Icon path={mdiDeleteForever} size={1} />
                         </button>
                         <span className="absolute hover-sibling:opacity-100 z-30 w-24 right-0 opacity-0 bg-white rounded-lg shadow-lg text-primary px-2 py-1 mt-1 border border-gray-200 text-center text-sm">
                              Eliminar taxi
                         </span>
                    </div>
               </div>
          </>
          }
     },],[taxis])
   
   return (
        <>
          <Table columns={columns} data={taxis} table={'Taxis'} />
        </>
   ) 

}

解决方法

The docs have the answer! 也就是说，您必须使用表上的 autoResetX 属性手动阻止这些内容更新。在这种情况下，您可能希望将 autoResetPage 和 autoResetFilters 设置为 false 以防止这些字段在您的数据集更新时更新。