单击按钮时 Reactjs 从 firestore 获取数据

Question

我想在用户单击 handleReset() 时从 firestore 加载数据。当我单击 handleReset() 时，它应该从 firestore 加载数据并存储在 localstorage 中。我正在使用反应。错误信息 Cannot read property 'map' of undefined.

admin.js

  handleReset(e) {
    const products = getDefaultProducts();
    saveProducts(products);
    this.setState({products});
    alert('Product Reset');
  }

product.js

export const getDefaultProducts = () => {

  const ref = firebase.firestore().collection('vouchers').doc('default');
  console.log('ref', ref)
    ref.get().then((doc) => {

      if (doc.exists) {
        return [
          { id: 'v5', qty: doc.data().v5 }, 
          { id: 'v10', qty: doc.data().v10, }, 
          { id: 'v20', qty: doc.data().v20 }, 
          { id: 'v50', qty: doc.data().v50 }, 
          { id: 'v100', qty: doc.data().v100 }
        ];  
      } else {
        console.log("No such document!");
      }
    });
}

export const saveProducts = (products) => {
  products = products.map(prd => {
    prd.qty = isNaN(+prd.qty) ? 0 : prd.qty
    return prd;
  });

  localStorage.setItem(STORAGE_KEY, JSON.stringify(products));
}

Answer 1

答案在您的错误消息中。 products 对象未定义，因为您没有 returning 来自 getDefaultProducts 的任何内容。 ref.get().then(... 是一个承诺，因此内部函数（您 return 所在的位置）将在您的函数完成后稍后执行。

要解决此问题，在 getDefaultProducts 中您必须 return Promise，然后使用适当的 .then 方法访问结果。

const getDefaultProducts = () => {
    const ref = firebase.firestore().collection('vouchers').doc('default');
    console.log('ref', ref);
    // see we've added a return statement here, to return a Promise from this method
    return ref.get().then((doc) => {
        if (doc.exists) {
            return [
                { id: 'v5', qty: doc.data().v5 },
                { id: 'v10', qty: doc.data().v10, },
                { id: 'v20', qty: doc.data().v20 },
                { id: 'v50', qty: doc.data().v50 },
                { id: 'v100', qty: doc.data().v100 }
            ];
        } else {
            throw new Error("No such document!"); // throw error here to cause current promise to be rejected
        }
    });
}

function handleReset(e) {
    getDefaultProducts().then((products) => {
        saveProducts(products);
        this.setState({ products });
        alert('Product Reset');
    }, (err) => {
        // this will be executed if firestore returns an error or document doesn't exist
        console.log(err);
    });
}

单击按钮时 Reactjs 从 firestore 获取数据

Reactjs fetch data from firestore when click button

javascript

loaddata

firebase

reactjs

google-cloud-firestore