当屏幕获得焦点时如何重新渲染 react-native FlatList？

Question

我正在开发一个带有 react-navigation 的 react-native 应用程序。用户打开应用程序时看到的第一个屏幕有一个FlatList组件，列出了一些产品并显示了它们的名称。当用户点击任何产品时，他会导航到产品详细信息，他可以更改产品名称。然后，当他导航回列表屏幕时，产品的新名称应显示在原始位置。我试图向组件添加一个extraData道具FlatList，但它没有按预期工作。<FlatList     data={this.state.washers}    extraData={this.state}     renderItem={this.renderItem}    keyExtractor={item => item.serialNumber}/>的state.washers是对象的数组，并且该对象的属性中的一个是名称。this.state.washers: Array(2):   0: {serialNumber: "20197", model: "", name: "first washer"}   1: {serialNumber: "201908301", model: "", name: "washer 2"}当用户更改产品（垫圈）的名称时，它会保存在名为的文本文件中 {~productSerialNumber~}Name.txt这是监听screen focus事件的代码focusListener = this.props.navigation.addListener('didFocus', async () => {    let washers = [];    if (await ReactNativeFS.exists(`${ReactNativeFS.DocumentDirectoryPath}/washers.json`)) {      washers = await ReactNativeFS.readFile(`${ReactNativeFS.DocumentDirectoryPath}/washers.json`, "ascii");      washers = JSON.parse(washers);    }    washers.forEach(async washer => {      const washerName = await ReactNativeFS.readFile(`${ReactNativeFS.DocumentDirectoryPath}/maquinas/${washer.serialNumber}Name.txt`);      washer.name = washerName;    });    this.setState({washers});  });}好吧，当我返回列表屏幕时，我可以看到状态已更改并使用新名称进行更新，但它显示FlatList组件中没有任何更改。我所看到的是，当我单击名为“name0”（例如）的产品并将其名称更改为“name1”（例如）时，然后返回列表屏幕，然后单击相同的产品并更改其名称为“name2”（例如），然后FlatList显示“name1”作为名称

Answer 1

将此代码放在您的构造函数中。我希望它会帮助您。

this.props.navigation.addListener(

         'didFocus',

         payload => {

           // call method which you want to call 

           // call those method where your state is update

         });

     }