状态更改时，Antdpro Table 列不起作用答案

【问题标题】：Antdpro Table column is not working when state changes状态更改时，Antdpro Table 列不起作用
【发布时间】：2022-01-20 03:33:28
【问题描述】：

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 会正确更改，但 Table 不会显示过滤后的值。

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

【问题讨论】：

标签： reactjs react-hooks antd ant-design-pro

【解决方案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 }/>

【讨论】：