如何在 React 中迭代对象数组

Question

我真的是一个反应菜鸟。（来自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>    );  }}现在我已经玩了几个小时了，但没有成功。我不断收到空白屏幕或未捕获的参考。如果有人能指出我正确的方向，那就太棒了！谢谢。

Answer 1

在本节中：

 <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的一个属性。这有道理吗？

Answer 2

首先，您必须从地图回调中返回一些内容：

{

 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>