Question

我正在使用React Native和Firebase实时数据库。我遇到了FlatList组件的两个问题：

我收到很多重复的密钥＆＃34;列表重新呈现时出现错误。我不确定为什么我会遇到此问题，因为我将列表中每个项目的键设置为Firebase生成的snap.key值，这是唯一的（我已在我的日志中验证了这一点）。
即使我向上或向下滚动列表，列表有时也不会重新渲染。这个＆＃34;有时＆＃34;行为让我失望，我无法调试它。我正在使用＆＃34; .on＆＃34;从Firebase实时数据库获取列表的方法。

这是我正在使用的代码：

export default class FlatListPage extends React.PureComponent {

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

    makeRemoteRequest = () => {
        var items = []; 
        DB.on('value', (snap) => {
            this.getItems(snap, items); 
            items = items.reverse(); 
            this.setState(
                {data: items}
            ); 
            console.log(this.state.data);  //checking key properties are unique 
        }); 

    }

    getItems = (snap, items) => {
        snap.forEach((child) => {
            items.push({
                key: child.key, 
                status: child.val().status, 
                location: child.val().location, 
            });
        });
    }

    componentWillMount(){
        this.makeRemoteRequest(); 
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.data}
                    renderItem={({item}) => <MyListItem item={item} />}
                />
            </View>
        );
    }
}

Answer 1

您正在接收重复密钥，因为您在从firebase收到新的items事件时未重置value数组。这意味着您只需重复添加相同的项目。

每次收到makeRemoteRequest事件时，请更新value方法重新创建数组，如下所示：

makeRemoteRequest = () => {
    DB.on('value', (snap) => {
        var items = [];
        this.getItems(snap, items); 
        items = items.reverse(); 
        this.setState(
            {data: items}
        ); 
        console.log(this.state.data);  //checking key properties are unique 
    }); 
}

我不确定2号 - 可能是因为上述内容将其视为副作用。

Answer 2

每次我建议获取所有元素 .once ，然后使用＆＃39; child_added＆＃39;而不是获取整个列表。 event和 .limitToLast（1）只获取新项并将它们添加到数组中。此外，我注意到您正在将项目推送到阵列，然后将其反转。您可以使用 .unshift 方法在数组的开头插入项目，这样您以后就不必反转它。

React Native / Firebase：FlatList重新渲染问题＆amp;重复密钥

2 个答案: