javascript - 数组 setState 和获取数组 React Native

Question

我正在尝试将数组设置为状态，但它似乎没有被设置。我在下面发布了一些代码。

我想要做的是，用户可以将项目上传到 firestore 上的主集合，然后该项目将显示在主屏幕上的主列表上。

我还希望用户能够通过单击自己的个人资料来查看自己的项目，并且他们可以看到仅包含这些项目的列表。

我采取的方法是将项目上传到 firestore 上的主集合，然后将文档 ID 和集合引用(即“c”)放入名为 userItems 的子集合中的文档中，其中包含特定用户的文档。我认为这是最好的方法，所以我只有“1 个事实来源”，而不必担心重复，特别是如果我将来必须更新任何文档的话。

正如我在顶部所说，我的问题是当我尝试在第二个方法“queryUserItems”中迭代数组时，数组为空。如果有人能够指出我做错了什么，我将非常感激，或者如果有人能够指出我最终想做的事情的一种更优雅和更有效的方式，那就是:以可以从主列表以及用户自己的列表中查看的方式保存项目，这有点像 Instagram 的工作方式。

感谢您的帮助:)

UserProfile.js

constructor() {
    super();

    this.getUserItems = this.getUserItems.bind(this);


    this.state = {
        Name: '',
        Location: '',
        items: [],
        Keys: [],
        test: ''
    };
}

componentDidMount() {
    console.log('UserProfile');

    this.getUserItems();
    //this.queryKeys();

}


getUserItems = () => {

    const Keys = [];

    const userCollectionRef = firebase.firestore()
        .collection('a').doc('b')
        .collection('c')




    userCollectionRef.get()
        .then((querySnapshot) => {
            console.log("user doc received");

            querySnapshot.forEach(function (doc) {

                console.log('Doc.id: ', doc.id);
                console.log('Doc.Key: ', doc.data().Key);
                console.log('Doc.CollectionRef: ', doc.data().CollectionRef);

                const {Key, CollectionRef} = doc.data();

                Keys.push({
                    Key,
                    CollectionRef
                })

            }); // foreach loop end
this.queryKeys(keys);




        }).catch(function (error) {
        console.error("getUserItems => error: ", error);
    });

  //  this.setState(() =>({
    //    Keys,
      //  test: 'testString'
   // }));

    console.log("Keys inside: ", Keys);
};


queryKeys(keys) {
    const items = [];


    console.log("queryKeys Called!");
    console.log("queryKeys :", keys);
    console.log('test: ', this.test);



    keys.forEach(function(Key, CollectionRef)  {

        console.log("Key array: ", Key);
        console.log("CollectionRef array: ", CollectionRef);

        firebase.firestore
            .collection('a').doc('b')
            .collection(CollectionRef)
            .doc(Key)
            .get().then(function (doc) {

            console.log("doc received");

            const {Name, imageDownloadUrl, Location} = doc.data();

            items.push({
                key: doc.id,
                doc, // DocumentSnapshot
                Name,
                imageDownloadUrl,
                Location,
            });

        }).catch(function (error) {
            console.error("queryKeys: error: ", error);
        })

    }) // forEach end

    this.setState({
        items
    });

}

更新:

我决定采取不同的方法，我只需在 getUserItems 中的 .then 末尾调用 queryKeys 函数，然后将键作为范围。这种方式似乎有效，因为它在正确的时间获取数组，但现在我从 firestore 收到错误:

当我这样做时:

firebase.firestore
        .collection('a').doc('b')
        .collection('c')
        .doc('docID').get()
        .then((doc) => {

如何通过 id 获取文档？

谢谢

Answer 1

我在下面所做的修改非常脏，我怀疑你的问题是你在循环执行之前在上面的两个方法中调用 setState 。

您正在同步循环，在循环内执行异步操作，退出循环(同步)，然后调用 setState，期望数组填充循环内获取的数据，这不会发生，因为您不等待 Firebase 的 AJAX 请求。

我下面所做的是将对 setState 的调用放入每个循环中的 Promise 解析中，这并不理想(事实上，这对于生产来说是一个糟糕的主意)，因为它将更新状态列表中的每个项目，而不是收集完所有数据后。你需要建立这个循环，有很多方法可以做到这一点。但它应该证明这一点，并且您应该在屏幕上看到数据。

constructor() {
    super();

    this.getUserItems = this.getUserItems.bind(this);


    this.state = {
        Name: '',
        Location: '',
        items: [],
        Keys: [],
        test: ''
    };
}

componentDidMount() {
    console.log('UserProfile');

    this.getUserItems();
    this.queryKeys();

}


getUserItems = () => {

    const Keys = [];

    const userCollectionRef = firebase.firestore()
        .collection('a').doc('b')
        .collection('c')




    userCollectionRef.get()
        .then((querySnapshot) => {
            console.log("user doc received");

            querySnapshot.forEach(function (doc) {

                console.log('Doc.id: ', doc.id);
                console.log('Doc.Key: ', doc.data().Key);
                console.log('Doc.CollectionRef: ', doc.data().CollectionRef);

                const {Key, CollectionRef} = doc.data();

                Keys.push({
                    Key,
                    CollectionRef
                })


            });

              this.setState(() =>({
                    Keys,
                    test: 'testString'
                }));

        }).catch(function (error) {
        console.error("getUserItems => error: ", error);
    });



    console.log("Keys inside: ", Keys);
};


queryKeys() {
    const items = [];


    console.log("queryKeys Called!");
    console.log("queryKeys :", this.state.Keys);
    console.log('test: ', this.test);



    this.state.Keys.forEach(function(Key, CollectionRef)  {

        console.log("Key array: ", Key);
        console.log("CollectionRef array: ", CollectionRef);

        firebase.firestore
            .collection('a').doc('b')
            .collection(CollectionRef)
            .doc(Key)
            .get().then(function (doc) {

            console.log("doc received");

            const {Name, imageDownloadUrl, Location} = doc.data();

            items.push({
                key: doc.id,
                doc, // DocumentSnapshot
                Name,
                imageDownloadUrl,
                Location,
            });

         this.setState({
             items
         });

        }).catch(function (error) {
            console.error("queryKeys: error: ", error);
        })

    }) // forEach end



}

下面您将看到一个粗略的示例，说明如何使用 async 和 wait 使循环异步，不确定 Firebase API 是否能很好地配合此操作，您可能需要阅读一些他们的文档。

queryKeys() {
    const items = [];


    console.log("queryKeys Called!");
    console.log("queryKeys :", this.state.Keys);
    console.log('test: ', this.test);



    this.state.Keys.forEach(async function(Key, CollectionRef)  {

        console.log("Key array: ", Key);
        console.log("CollectionRef array: ", CollectionRef);

        try {
            let result = await firebase.firestore
            .collection('a').doc('b')
            .collection(CollectionRef)
            .doc(Key)
            .get();


            const {Name, imageDownloadUrl, Location} = result.data();

            items.push({
                key: doc.id,
                doc, // DocumentSnapshot
                Name,
                imageDownloadUrl,
                Location,
            });
        } catch (e) {
            console.error("queryKeys: error: ", error);
        }
    }) // forEach end


    this.setState({
        items
    })

}