如何在jsx中調用變量

Question

我已經定義了一個變量，我正在設置變量的內容 = 圖像 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"
      })
    }
})

然后我試圖在我的 jsx 代碼中訪問regData的內容，如下所示：

 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

我該如何解決？

這是嘗試。然后：

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

}

Answer 1

您需要使用組件級 state 來操作動態異步數據。 這是您的代碼的修改版本。

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