react-table删除行后重渲染丢失分页、筛选等状态该如何解决？

问题根源 #

你遇到的状态丢失核心原因是columns的useMemo错误依赖了taxis状态：每次删除行更新taxis时，都会生成全新的列配置对象，react-table检测到列配置变更后会重置所有内部状态，包括分页页码、搜索筛选、排序等配置。

修复步骤 #

• 移除columns的useMemo依赖项中的taxis，你的列逻辑仅用到Cell参数传入的row、value，没有依赖外部的taxis变量，不需要将其加入依赖列表
• 删除行的状态更新改用函数式写法，避免闭包陷阱，同时不需要依赖当前的taxis值
• 为删除按钮的点击回调添加async声明，否则await语法会直接报错

修正后代码示例 #

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={async () => {
                  const res = await fetch(`${APP_CONSTANTS.REST_API}`,{
                    method: "DELETE"
                  })
                  if (res.ok) {
                    // 改用函数式更新，不需要依赖外部taxis
                    setTaxis(prev => prev.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依赖，若有其他外部依赖（如图标常量、APP_CONSTANTS）可按需添加

  return (
    <>
      <Table columns={columns} data={taxis} table={'Taxis'} />
    </>
  ) 
}

可选优化 #

如果修改后仍有状态丢失问题，可以将分页、筛选、排序等状态从react-table内部提升到当前Taxis组件自行管理，完全控制状态的生命周期。

内容的提问来源于stack exchange，提问作者David Escariz