从 FlatList 重新加载数据 - React Native答案

【问题标题】：Reload data from FlatList - React Native从 FlatList 重新加载数据 - React Native
【发布时间】：2021-02-14 14:28:23
【问题描述】：

我有一个从我的 API 获取数据的 FlatList，我想在每次我的数据库更新时刷新它。有人可以帮我吗？

我的代码：

export default class Feed extends Component {

constructor(props) {
    super(props);
    this.state = {
        dataSource: []
    };
}

componentDidMount() {
    fetch('http://192.168.200.100:3000/posts')
        .then(response => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson
            })
        })
        .catch(error => console.log(error))
}
render() {
    return (
        <KeyboardAvoidingView >
            <Header>
                <FeedModal></FeedModal>
            </Header>
            <FlatList
                keyExtractor={props => props.id}
                data={this.state.dataSource}
                renderItem={({ item }) => <FeedPosts title={`${item.title}`} photoDesc={`${item.description}`} postImg={`${item.photo}`} ></FeedPosts>}
            >
            </FlatList>
        </KeyboardAvoidingView>
    );
}

}

【问题讨论】：

标签： react-native reload fetch-api react-native-flatlist

【解决方案1】：

要在后端发生更改时更新应用内的值，您将需要一个实时数据库，或者您必须使用网络套接字：

网络套接字： WebSocket 是一种互联网通信协议，具有相关的有趣特性：它通过单个 TCP 连接提供全双工通道。

使用 WebSockets，客户端和服务器可以实时通信，就像他们在打电话一样：一旦连接，客户端就可以从服务器接收数据，而无需不断刷新网页。另一方面，服务器也将能够在同一连接内从客户端实时接收数据。对于 react native 查看这篇关于 websockets 的文章，它也应该从后端处理。

实时数据库： 实时数据库包含正在实时处理的数据。它使用实时处理技术来处理工作负载。例如 firebase 实时数据库。

【讨论】：