如何在 React 中遍历对象数组

Question

我是一个真正的反应菜鸟。 （来自java背景哈哈）。我一直在努力尝试从 cryptocompare api 渲染一组对象。使用 console.log(data.Data) 的 api 看起来像这样

0：{CoinInfo：{…}，RAW：{…}，显示：{…}}

1: 币信息： 算法：“Ethash” 资产发布日期：“2015-07-30” 区块号：11354985 区块奖励：2.2818216676269 出块时间：13.133262903712646 文档类型：“Webpagecoinp” 全名：“以太坊” 编号：“7605” ImageUrl：“/media/20646/eth_logo.png” 内部：“ETH” 最大供应：-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>

您应该首先检查map 函数的工作原理。您应该命名数组中的单个元素（每个硬币），而不是 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>
)

第二个 - 你的name 是对象{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() 只需 this.getData() 并且不要使 componentDidMount() 异步。并且不要在没有 - 的情况下使用 <li> 标签，或者在没有 <li> 的情况下将名称放在 div 中