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

Posted

技术标签:

【中文标题】单击按钮时Reactjs从firestore获取数据【英文标题】:Reactjs fetch data from firestore when click button 【发布时间】:2019-11-30 05:11:24 【问题描述】:

当用户单击handleReset() 时,我想从 Firestore 加载数据。当我单击handleReset() 时,它应该从firestore 加载数据并存储在localstorage 中。我正在使用reactjs。错误消息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));

【问题讨论】:

【参考方案1】:

答案在您的错误消息中。 products 对象未定义,因为您没有从 getDefaultProducts 返回任何内容。 ref.get().then(... 是一个承诺,因此内部函数(您返回的地方)将在您的函数完成后稍后执行。

要解决此问题,您必须在 getDefaultProducts 中返回一个 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);
    );

【讨论】:

您好,需要this question 方面的帮助吗? 谢谢@caesay。像魅力一样工作

以上是关于单击按钮时Reactjs从firestore获取数据的主要内容,如果未能解决你的问题,请参考以下文章

当大量文档从 Firestore 快照到达时,如何不让 ReactJS 应用程序冻结?

如何在 swift iOS Firestore 中获取单元格文档 ID?

ReactJS Ant Design - 单击按钮时打开 DatePicker

我只想在 reactjs 中更改单击按钮(onClick)的变体或背景。我怎样才能实现它?

在 ReactJS 中单击按钮时通过 id 动态加载数据

在 ReactJs 中单击按钮时加载新组件?