Antdpro 表列在状态更改时不起作用

Question

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

...

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

...

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

我像上面一样写了我的专栏，我希望在重新渲染发生时更改我的defaultFilteredValue。

当我像

useEffect(()=>{console.log(column)},[parks.length])

这样控制台列时，列的defaultFilteredValue会正确更改，但表不显示filterd值。

我应该怎么做才能解决这个问题？

Answer 1

我可能是错的，但似乎

defaultFilteredValue

值仅在初始渲染时设置一次，并且在进一步更新时不会响应。而且没关系。

所以我的建议是等到收到数据后才渲染表格，这样您就会用实际的有效数据渲染它。我会做类似的事情：

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 }/>

Answer 2

为了强制表格重新渲染，给它一个每个状态都不同的

key

属性，例如你可以这样做：

<Table 
       columns={filteredColumns}
       key={filteredColumns.length}
       ...etc