0

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

  1. 每当列表重新呈现时，我都会收到很多“重复键”错误。我不确定为什么会遇到这个问题，因为我将列表中每个项目的键设置为snap.keyFirebase 生成的值，这是唯一的（我已经在我的日志中验证了这一点）。

  2. 该列表有时不会重新呈现，即使我向上或向下滚动它也是如此。这种“有时”的行为让我失望，我无法调试它。我正在使用“.on”方法从 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>
        );
    }
}
4

2 回答 2

1

您收到重复的键是因为您在从 firebaseitems接收新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 - 可能是上面将其修复为副作用。

于 2018-01-26T11:43:07.130 回答
0

而不是每次我建议获取所有元素时都获取整个列表.once然后使用 'child_added' 事件和.limitToLast(1)仅获取新项目并将它们添加到您的数组中。另外，我注意到您正在将项目推送到数组，然后将其反转。您可以使用.unshift方法在数组的开头插入项目，这样您以后不必反转它。

于 2018-03-29T16:53:17.963 回答