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

Question

我正在为我的应用程序使用 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>

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

谢谢

Answer 1

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

所以对于你提到的情况：

例如，我的列表中有 5 个用户，我添加了一个用户。

你的代码会

1. 拉出5个用户并添加到getUsersFromDB
2. 一旦你添加了 1 个用户，它将拉出所有 6 个用户并将它们添加到 getUsersFromDB

你所经历的：

添加后必须是6个用户，但是我得到了11个用户而不是6个。

为避免重复，您可以：

• 检查changes in the snapshot
• 在前端检查重复项

第一个是最干净的，但为了安全起见，您应该同时实施这两个。