React-table rerender table 删除一行时

Question

我在我的项目中使用了 react-table，我有一个删除行的按钮。它工作正常但是当删除行时 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'} />
        </>
   ) 

}

Answer 1

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

React-table rerender table 删除一行时

React-table rerender table when deleting a row

reactjs

react-hooks

react-table

react-table-v7