来自 React Native 中 Firebase Firestore 的重复数据

Question

我正在尝试从 Firestore 中的数据库加载一些数据，但我不明白为什么该变量会从中加载重复的文档。

在 Firestore 中，我有一个包含两个元素 test1 和 test2 的集合，如下面的屏幕截图所示。

我正在我的函数 seleccionarTest() 中加载完整的集合，我想加载带有两个文档（test1 和 test2）的 var 测试，我稍后将在 Touchable Flat List 中使用它们。

查看函数：

export default function AsignarTest({route, navigation}){
console.log("Entrando en asignar test");
const {usuario} = route.params;

const [animacion, setAnimacion] = useState(true);
const [tests, setTests] = useState([]);

const db = firestore();

function seleccionarTests(){
    db.collection("test").get()
.then((querySnapshot) =>{       
    var i=0;
    querySnapshot.forEach((documentSnapshot)=>{
        tests.push({id:documentSnapshot.id, datos: documentSnapshot.data()});
    });
    setAnimacion(false);
    console.log(tests);
    return;
}).catch((error)=>{
    console.log(error);
    });
}

//Gestionamos cuando el usuario selecciona una peluqueria
const gestionarClick = (id)=>{
        //Todo
        console.log(id);
}

const p = seleccionarTests();

return(
    <View style={estiloGlobal.container}>
        <ActivityIndicator
            size="small"
            color = "#dd85be"
            animating = {animacion} />
        <View>
            <FlatList
                keyExtractor = {(item) => item.id}
                data={tests}
                renderItem= {({item})=> (
                    <TouchableOpacity
                        onPress={() =>{gestionarClick(item.id)}}>
                            <View style={estiloGlobal.lineaRecta}>
                                <View style={{paddingLeft: 10}}>
                                    <Text style= {estiloGlobal.botonTexto}>{item.id}</Text>
                                </View>
                            </View>
                    </TouchableOpacity>
                )} />
        </View>
    </View>
);

}

不幸的是，正如您在下一个屏幕截图中看到的那样，我在 console.log 中的 var 有 4 个文档（test1、test2、test1、test2），我不明白为什么这些文档会重复。

感谢您的 cmets！

Answer 1

发生这种情况的原因可能是因为代码中的其他地方 seleccionarTests 函数被第二次调用，或者该数据实际上是来自先前执行的垃圾数据，从未在数组中清理过。

为了解决这个问题，您需要在每次执行函数时清除数组，执行以下操作：

function seleccionarTests(){
    this.setState({tests: []});
    db.collection("test").get().then((querySnapshot) =>{       
        var i=0;
        querySnapshot.forEach((documentSnapshot)=>{
            tests.push({id:documentSnapshot.id, datos: documentSnapshot.data()});
        });
        setAnimacion(false);
        console.log(tests);
        return;
    }).catch((error)=>{
        console.log(error);
    });
} 

注意：在像您这样使用集合的所有结果填充数组以防止重复数据的情况下，应始终将此作为最佳做法。