Question

对于我来说，我想实现onSnapshot函数来获取实时更新，因此这是我现在可以正常工作的示例代码：

db.collection("Cities").onSnapshot((snapshot) => {

    snapshot.docs.forEach((doc) => {
         console.log(doc.data());
    });

});

但是现在，如何将其实现为以下代码

 getMyInfo = () => {
        db.collection("Cities")
            .limit(8)
            .get()
            .then((docs) => {
                if (!docs.empty) {
                    let AllCities = [];
                    docs.forEach(function (doc) {
                        const city = {
                            id: doc,
                            ...doc.data(),
                        };
                        AllCities.push(city);
                    });
                    this.setState(
                        {
                            cities: AllCities,
                        },
                        () => {
                            this.setState({
                                isLoaded: true,
                            });
                        }
                    );
                }
            });
    };

谢谢

Answer 1

您正在将所有城市都保存到您的州。用它来添加或更新新的（或更新的）城市。

也许您可以尝试这样的事情：

db.collection("Cities").onSnapshot((snapshot) => {
  snapshot.docs.forEach((doc) => {
    const updatedCity = doc.data();
    const cities = [...this.state.cities];
    const index = this.state.cities.findIndex(c => c.id === updatedCity.id);

    if (index >= 0) {
      cities[index] = updatedCity;
    } else {
      cities.push(updatedCity);
    }

    this.setState({ cities });
  });
});

实现onSnapshot函数以在reactjs代码中获取实时更新

1 个答案: