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

Question

• 我正在开发一个带有 React-navigation 的 React-Native 应用。
• 用户打开应用时看到的第一个屏幕有一个 FlatList 组件，其中列出了一些产品并显示其名称。
• 当用户点击任何产品时，他会导航至产品详细信息，并且可以更改产品名称。
• 然后，当他导航回列表屏幕时，产品的新名称应显示在原始名称的位置。

我尝试向 FlatList 组件添加 extraData 属性，但它没有按预期工作。

<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

的文本文件中

这是监听屏幕焦点事件的代码

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”作为名称

抱歉英语不好，感谢您的帮助! <3

Answer 1

查看 React Navigation 文档，您可以尝试使用 withNavigationFocus 而不是 didFocus 监听器。

import React, { Component } from "react";
import { View } from "react-native";
import { withNavigationFocus } from "react-navigation";

class MyScreen extends Component {
  componentDidMount() {
    this.updateWashers();
  }

  componentDidUpdate(prevProps) {
    // Check that screen is newly focused
    if (this.props.isFocused && prevProps.isFocused !== this.props.isFocused) {
      this.updateWashers();
    }
  }

  updateWashers() {
    // put in your code to read saved data
  }

  render() {
    return <View />;
  }
}

export default withNavigationFocus(MyScreen );

改编自https://reactnavigation.org/docs/en/3.x/function-after-focusing-screen.html