为什么FlatList无法在React Native中动态更新

Question

我是本机的新手，但我正在尝试动态更新列表。

下面是我的代码：

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中附加的数据未显示在页面上。

请帮助我解决它，或者如果还有其他方法可以解决，请告诉我。

提前致谢。

Answer 1

嗨，尝试看看您可以在FlatList上使用的extraData参数：

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

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

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

同样，您不应该<List>从react native元素中获取此信息，这里的列表行为完全由FlatList处理。