时间戳

首页 > 解决方案 > 如何在jsx中调用变量

javascript - 如何在jsx中调用变量

问题描述

我已经定义了一个变量，并且我正在设置变量的内容 = 图像 url，如下所示：

  var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 

      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)

      if (regData == "yes"){
        regData = "https://i.gifer.com/Z23Y.gif"

        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
})

然后我试图访问regData我的 jsx 代码中的内容，如下所示：

 return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>

      <div className="container"><img src={ regData } width="300px" height="300px"/></div>

    </BottomTabsWithFullHeightContent>
    
  )
}

但是，它实际上并没有像预期的那样在屏幕上显示图像。它给了我：

TypeError: null is not an object

我该如何解决？

这是 .then 的尝试：

var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 

      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)

      if (regData == "yes"){
        regData = '"https://i.gifer.com/Z23Y.gif"'

        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
}).then (() => {


  return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>
      <TabPane tab={ <VerticalCaptionedIcon type="contacts" theme="filled" caption="Clients" /> } key={ routes.CLIENTS }>
        <ClientTabContent { ...props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="file-text" theme="filled" caption="Estimates" /> } key={ routes.ESTIMATES }>
        <EstimateTabContent { ... props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="form" caption="Jobs" /> } key={ routes.JOBS }>
        <JobTabContent { ... props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="user" caption="Profile" /> } key={ routes.PROFILE }>
        <UserProfileContent { ... props }/>
      </TabPane>
      

      <div className="container"><img src={ regData }width="300px" height="300px"/></div>
      { console.log("rd: " + regData) }

    </BottomTabsWithFullHeightContent>
    
  )
})

}

标签： javascriptnode.jsreactjs

解决方案

您需要使用组件级状态来操作动态异步数据。这是您的代码的修改版本。

import {useState} from 'react';

const [regData, setRegData] = useState('');

firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 
      setRegData(doc.data().registeringFlag);

      if (regData == "yes"){
        setRegData("https://i.gifer.com/Z23Y.gif");
        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
})


 return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>

   {regData && <div className="container"><img src={ regData } width="300px" height="300px"/></div>}

    </BottomTabsWithFullHeightContent>
    
  )
}

推荐阅读