问题描述
我在我的项目中使用 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
以防止这些字段在您的数据集更新时更新。