React Native Update a Flatlist Item

Posted 2021-04-16

我想在单击特定的Flatlist行时对其进行更新，该怎么做？我找到的解决方案全部使用extraData={this.state}，在我的代码中不起作用。

const [records,setRecords] = useState([]);
//add initial data to records
...
return (
<FlatList
    data={records}
    keyExtractor={item => item.id}
    renderItem={itemData =>
        <RecordItem
            onSelect={() => {
                props.navigation.navigate({...})
                }
            } 
            onApply={()=>{
                // in my RecordItem these is a button to call onApply(), 
                and I want to update the Flatlist when I click this button

                var res = applyHandler();
                return res;
            }}
        >
        </RecordItem>
     }
/>)

答案

要更新清单列表项目，您只需更新其呈现的数据，为此，在onApply函数中，您知道项目索引，可以使用该索引来更新记录索引，例如：

const [records,setRecords] = useState([]);
//add initial data to records
...
return (
<FlatList
    data={records}
    keyExtractor={item => item.id}
    renderItem={itemData =>
        <RecordItem
            onSelect={() => {
                props.navigation.navigate({...})
                }
            } 
            onApply={()=>{
                // here you will get reference to record item index, 
                const itemIndex = itemData.index;
                const modRecords = [...records];
                modRecords[itemIndex].title = 'NEW TITLE';
                // assuming title is what you want to change
                // now just update the records using setRecords
                setRecords(modRecords);
            }}
        >
        </RecordItem>
     }
/>)