为什么 FlatList 在 React Native 中没有动态更新 [英] Why FlatList is not updating dynamically in React Native

问题描述

我对原生反应很陌生，我正在尝试动态更新列表.

I'm very new to react native and I'm trying to update list dynamically.

下面是我的代码:

import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Tile, ListItem, List } from "react-native-elements";


export default class JoinSession extends Component {

    constructor() {
        super();

        this.state = {
            dataToRender: [{ "id": "0", "name": "name0", "des": "des0" }]
        }
    }

    componentDidMount() {   
        var counter = 0;
        const interval = setInterval(() => {
            try {
                var temp = {
                    "id": ++counter + "",
                    "name": "name" + counter,
                    "des": "des" + counter
                }

                let tempArray = this.state.dataToRender;
                tempArray.push(temp);

                this.setState({
                    dataToRender: tempArray
                });

                console.log(this.state.dataToRender);

                if(counter === 10) {
                    clearInterval(interval);
                }
            } catch (e) {
                console.log(e.message);
            }
        }, 2000);
    }

    renderList(item) {
        console.log(item);

        return (
            <ListItem
                roundAvatar
                title={item.name}
                subtitle={item.des}
            />
        );
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: "stretch", backgroundColor: "skyblue" }}>
                <List>

                    <FlatList
                        data={this.state.dataToRender}
                        renderItem={({ item }) => this.renderList(item)}
                        keyExtractor={item => item.id}
                    />
                </List>
            </View>
        );
    }
}

我只能获取我在构造函数中声明的第一个元素，但是我在 serInterval 中附加的数据没有显示在页面上.

I am only able to get first element which I've declared in the constructor but data which I'm appending in serInterval is not showing up on the page.

请帮我解决它，或者如果有任何其他方法可以做到这一点，请告诉我.

Please help me to resolve it or if there is any other way to do it, please let me know.

提前致谢.

推荐答案

尝试看看可以在 FlatList 上使用的 extraData 参数:

Hi try to have a look on the extraData parameter you can use on a FlatList:

通过将 extraData={this.state} 传递给 FlatList，我们确保 FlatList 本身会在 state.selected 更改时重新呈现.如果没有设置这个 prop，FlatList 不会知道它需要重新渲染任何项目，因为它也是一个 PureComponent，并且 prop 比较不会显示任何变化.

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

<FlatList
 ...
 extraData={this.state}
/>

有关 FlatList 文档的更多信息:https://facebook.github.io/react-native/docs/flatlist.html

More info on the FlatList documentation: https://facebook.github.io/react-native/docs/flatlist.html

此外，您不应该需要来自 react native 元素的这个 ，这里的列表行为完全由您的 FlatList 处理.

Also you shouldn't need this <List> from react native element here the list behaviour is totally handle by your FlatList.

这篇关于为什么 FlatList 在 React Native 中没有动态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！