React Native 更新一个平面列表项

Question

I want to update a specific Flatlist row when it is clicked, how can I do this? The solutions I found are all using extraData={this.state} , which is not working in my code.

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

Answer 1

To update your flatlist item, you just have to update the data it is rendering from, in order to do this, in your onApply function you know the item index with which you can update the record index like:

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