reactjs - 在功能组件中重新渲染平面列表

Question

我将一个空数组传递到我的 flat-list。我还使用 useEffect 从服务器获取数据并更新列表。但是，在使用数据设置数组的新状态后，flat-list 不会重新呈现。

const [listData, setlistData] = React.useState<Transaction[]>([])
const [dataUpdated, setDataUpdated] = React.useState<boolean>(false)

React.useEffect(() => {

    if(route.params.showAllData)
    {
        fetchTransactions(1, TRANSACTION_PAGE_SIZE, 1)
            .then((res: Transaction) => {
                console.log(`TransactionsScreen: userEffect [] => fetched ${JSON.stringify(res)}`);
                setlistData(prevState => ({...prevState, ...res}));
                setDataUpdated(true)
            })
            .catch(err => {

                //TODO: handle error scenerio
                ToastAndroid.show(`Failed to fetch transacrions`, ToastAndroid.SHORT)
                
            })
    }}, [])    

<FlatList
     data={listData}
     renderItem={item => _renderItem(item)}
     ItemSeparatorComponent={TransactionListSeparator}
     extraData={dataUpdated} // extraData={listData <--- didn't work either}
     keyExtractor={item => item.id.toString()}/>

我尝试将数据数组添加为 extraData 值，但没有成功，我还尝试添加另一个 bool 值，通知数据已更新，但也没有成功。

如何正确地重新渲染 flat-list？

Answer 1

您可以通过将更新的列表作为 extraData 属性传递来强制平面列表重新呈现，即 extraData={listData}。然而，当使用功能组件时，一个常见的错误是将列表数据的相同实例作为 prop 传递。即使列表中的内容或列表的长度发生变化，这也不会触发重新渲染。 FlatList 认为这是相同的，不会重新渲染。要触发重新渲染，您必须创建一个全新的列表实例。

例如:

//This update will NOT trigger a rerender
const copy = listData;
copy.push(something)
setListData(copy)

////////
<FlatList extraData={listData}
.....
/>

//This WILL trigger a rerender
const copy = [...listData]
copy.push(something)
setListData(copy)

////////
<FlatList extraData={listData}
.....
/>