亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React 中迭代對象數組

如何在 React 中迭代對象數組

桃花長相依 2023-09-21 17:14:56
我真的是一個反應菜鳥。(來自java背景哈哈)。我一直在努力嘗試從 cryptocompare api 渲染對象數組。使用 console.log(data.Data) 的 api 看起來像這樣0:{CoinInfo:{…},RAW:{…},顯示:{…}}1:CoinInfo:算法:“Ethash”AssetLaunchDate:“2015-07-30”區塊編號:11354985區塊獎勵:2.2818216676269區塊時間:13.133262903712646文檔類型:“Webpagecoinp”全名:“以太坊”ID:“7605”ImageUrl:“/媒體/20646/ eth_logo.png” 內部:“ETH” MaxSupply:-1 名稱:“ETH” NetHashesPerSecond:301850977727331 證明類型:“PoW”等等等等。我現在正在嘗試具體渲染硬幣的名稱。我的代碼如下:constructor(props) {    super(props);    this.state = {      names: []    };  }  async getData() {    const response = await axios.get(endpoint)    const data = response.data;    console.log(data.Data[0].CoinInfo.Name)    this.setState({      names: data.Data    })  }  async componentDidMount() {    await this.getData();  }  render() {    return (      <div>        {this.state.names.map((name, i) => {          <div key={i}>            <li>              // Not sure what to put here....              {name[i]}            </li>          </div>        })}      </div>    );  }}現在我已經玩了幾個小時了,但沒有成功。我不斷收到空白屏幕或未捕獲的參考。如果有人能指出我正確的方向,那就太棒了!謝謝。
查看完整描述

2 回答

?
呼如林

TA貢獻1798條經驗 獲得超3個贊

在本節中:


?<div>

? ? ? ? {this.state.names.map((name, i) => {


? ? ? ? ? <div key={i}>

? ? ? ? ? ? <li>

? ? ? ? ? ? ? // Not sure what to put here....

? ? ? ? ? ? ? {name[i]}

? ? ? ? ? ? </li>

? ? ? ? ? </div>

? ? ? ? })}

? ? ? </div>

您應該首先檢查地圖功能是如何工作的。您應該命名數組中的單個元素(每個硬幣),而不是name 。所以它會變成這樣:

<div>

? ? {this.state.names.map((coin, i) => {


? ? ? <div key={i}>

? ? ? ? <li>

? ? ? ? ??

? ? ? ? ? {coin.name}

? ? ? ? </li>

? ? ? </div>

? ? })}

? </div>

其中name只是 json 對象coin的一個屬性。這有道理嗎?


查看完整回答
反對 回復 2023-09-21
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

首先,您必須從地圖回調中返回一些內容:


{

 this.state.names.map((name, i) => {

   return (

     <div key={i}>

       <li>

         // Not sure what to put here....

         {name[i]}

      </li>

     </div>

   )

 })

}

或者你可以使用另一種變體:


this.state.names.map((name, i) => (

  <div>...</div>

)

第二個 - yourname是對象{CoinInfo: {…}, RAW: {…}, DISPLAY: {…}} 所以如果你想在里面放一個名字,li只需像上面那樣獲取它:name.CoinInfo.Name。


{

 this.state.names.map((name, i) => {

   return (

     <div key={i}>

       {name.CoinInfo.Name}

     </div>

   )

 })

}

如果您不確定是否name只是控制臺在返回 JSX 之前將其記錄在回調中。


順便說一句,您不需要使用await this.getData()justthis.getData()并且不要進行componentDidMount()異步。并且不要使用<li>沒有 - 的標簽,或者只是將名稱放入div其中<li>


查看完整回答
反對 回復 2023-09-21
  • 2 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號