如何在 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

首先，您必须从地图回调中返回一些内容：{&nbsp;this.state.names.map((name, i) => {&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;<div key={i}>&nbsp; &nbsp; &nbsp; &nbsp;<li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Not sure what to put here....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{name[i]}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;)&nbsp;})}或者你可以使用另一种变体：this.state.names.map((name, i) => (&nbsp; <div>...</div>)第二个 - yourname是对象{CoinInfo: {…}, RAW: {…}, DISPLAY: {…}} 所以如果你想在里面放一个名字，li只需像上面那样获取它：name.CoinInfo.Name。{&nbsp;this.state.names.map((name, i) => {&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;<div key={i}>&nbsp; &nbsp; &nbsp; &nbsp;{name.CoinInfo.Name}&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;)&nbsp;})}如果您不确定是否name只是控制台在返回 JSX 之前将其记录在回调中。顺便说一句，您不需要使用await this.getData()justthis.getData()并且不要进行componentDidMount()异步。并且不要使用<li>没有 - 的标签，或者只是将名称放入div其中<li>