Antdpro Table column is not working when state changes

user_15135426 0
Viewed 110
const [park, parks] = useState<Park[]>([]);

...

useState(()=>{
 (async () => {... // call Park Data as Array})()
},[]);

...

const columns = [
  {
    title: 'column1',
    key: 'column1',
    filters: true,
    defaultFilteredValue: parks?.length ? ['...'] : [],
    ...
  }
];

I wrote my column like above, and I want my defaultFilteredValue changes when rerender happens.

When I console the columns like useEffect(()=>{console.log(column)},[parks.length]), column's defaultFilteredValue changes properly, but Table doesn't show filterd value.

What should I do to solve this problem?

ant-design-pro antd react-hooks reactjs
1 Answers

I may be wrong, but it seems like defaultFilteredValue value is setting only once on initial render and does not respond on further updates. And it's ok.

So my suggestion is to wait till you receive data and only then render table, so you will get it rendered with actual valid data. I'd do something like that:

const [park, parks] = useState<Park[]>([]);

const [isLoading, setIsLoading] = useState(false);
...

useState(()=> {
 // handle loading flag somehow
 ...
 (async () => {... // call Park Data as Array})()
},[]);

if (isLoading) {
  return <LoadingSpinner />
}

return <Table { ...yourPropsHere }/>
user_126899890
Related