添加数据后，我从 Firestore 获得重复数据。在 React Native 中

Posted 2023-02-16

技术标签:

【中文标题】添加数据后，我从 Firestore 获得重复数据。在 React Native 中【英文标题】：I get duplicate data from Firestore after adding data. In React Native 【发布时间】：2022-01-18 17:36:47 【问题描述】：

我正在为我的应用程序使用 React Native 和 Firestore。我使用 onSnapshot() 从 Firestore 检索数据。我在检索数据方面没有问题，但是在我添加新用户后，它会添加新用户以及现有数据。例如，我的列表中有 5 个用户，我添加了一个用户。添加后必须是6个用户，但我得到了11个用户而不是6个。

因此我收到此错误：“遇到两个使用相同密钥的孩子...”

如果我通过 Firestore 手动编辑数据，我不会得到更改，例如，如果我将名称 James 更改为 Mike，它不会改变，只有当我重新加载应用程序时。

奇怪的是它第一次工作，几天后当我再次开始这个项目时，我得到了这个错误。

const userCol = firestore.collection("tblUser"); 
const [users, setUsers] = useState([]);

这是我从 Firestore 获取数据的函数：

  useEffect(() => 
    const getUsersFromDB = [];

    const getData = userCol.onSnapshot((snapshot) => 
      snapshot.forEach((doc) => 
        getUsersFromDB.push(
          ...doc.data(), id: doc.id
        );
      );
      console.log("array size: " + users.length)
      setUsers(getUsersFromDB)
      setLoading(false)
    )

    return () => getData()

  , [loading])

  if (loading) 
    console.log("loading data")
    console.log("array size: " + users.length)

这是我第一次打开屏幕后的console.log：

我添加用户后的console.log，首先数组的大小是13，添加一个用户后是27：

这是我添加用户的功能：

  const addUser = () => 
    /* 
     Some of the fields are empty because they are not necessary
    */
    userCol.add(
      image: (a link of the image in firestore),
      firstName: userFirstname,
      lastName: userLastname,
      email: userEmail,
      password: userPassword,
      function: "",
      isAdmin: false,
      phoneNumber: "",
      label: userLabel,
      hobby: "",
      startDate: firebase.firestore.FieldValue.serverTimestamp(),
    ).then(() => 
      console.log("user addded" + userFirstname + " " + userLastname)
      console.log("array size: " + users.length)
    ).catch((error) => 
      console.log("error: " + error)
    );

列表代码：

      /* List of users */
      <View style=styles.userList>
        <ScrollView showsVerticalScrollIndicator=false>
          
            users.map((user) => (
              <ListItem key=user.id bottomDivider>
                <Avatar source= uri: user.image  />
                <ListItem.Content>
                  <ListItem.Title>`$user.firstName $user.lastName`</ListItem.Title>
                  <ListItem.Title>"id: " + user.id</ListItem.Title>
                </ListItem.Content>
                <Icon name='delete' color="#0A355E" onPress=() => deleteUser(user.id) />
              </ListItem>
            ))
          
        </ScrollView>
      </View>

添加用户的按钮代码：

/* creates new user */
                <Button style=styles.button
                  onPress=() => 
                    addUser()
                      + setTimeout(() => 
                        Alert.alert(userFirstname + " " + userLastname + " is added")
                      , 2000) + setModalVisible(false) + console.log("array size: " + users.length)

                  
                >
                  <Text style=styles.buttonTxt>Creëer</Text>
                </Button>

我知道有些问题与我的几乎相同，但解决方案对我没有帮助。我也尝试在添加用户之前清空数组，但没有帮助。

谢谢

【问题讨论】：

【参考方案1】：

您的代码正在使用快照来提取集合中的所有文档，并将它们添加到数组 getUsersFromDB。

所以对于你提到的情况：