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
    });

}

更新：

我决定采用另一种方法，我只在{.1n.then的末尾调用queryKeys函数，然后将键作为参数传递。这种方法似乎可以正常工作，因为它在正确的时间获取了数组，但是现在我从firestore中得到了一个错误：

当我这样做时：

getUserItems

如何通过id获取文档？

谢谢

Answer 1

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

您正在同步循环，在循环内执行异步操作，退出循环（同步），并调用setState，期望数组被循环内获取的数据填充，因为您不会这样做不在等待AJAX对Firebase的请求。

我在下面所做的是将对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和await使循环异步，并不确定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
    })

}

数组setState并获取数组React Native

1 个答案: