如何将嵌套数组映射到 React 中的列表？答案

【问题标题】：How do I map nested array into lists in React?如何将嵌套数组映射到 React 中的列表？
【发布时间】：2021-05-02 12:27:39
【问题描述】：

我在 React 中将数组映射为列表时遇到问题。

这是我当前的反应代码：

import React, { Component } from "react";
import axios from "axios";

class BuySell extends Component {
  constructor() {
    super();
    this.state = {
      dataDepth: [],
    };
  }

  componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      console.log(getData);
      this.setState({
        dataDepth: [getData.data],
      });
    });
  }
  render() {
    const dataBuy = this.state.dataDepth.map((item, index) => {
      var listBuy = [item.buy];
      return <li key={index}>{listBuy}</li>;
    });

    return (
      <div>
        <h1>GET DATA:</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

export default BuySell;

当前输出为：

4464800000.046446090.6844680998944446080796844608079464446080.04444680898944444807946444480384464448800 ,>>>>>>>>>>>>>>>>>>>>>>>>>>SC60398939898039398980889466446080384644460880034464460803864444860383444468080.344468 ,>>>>>>>>>>>>>>>（

（编辑）我的期望：

4464800000
4464280000
4460200000
4460010000
等等

（每个数组项的第一个索引）

API 数据是：

{
    "buy": [
        [
            447500000,
            "0.03443557"
        ],
        [
            447216000,
            "0.00022361"
        ],
        [
            447198000,
            "0.00234181"
        ],
        [
            447142000,
            "0.00002564"
        ],
so on
}

【问题讨论】：

为什么[item.buy]被转换成数组？
您可能应该展示一个从 API 返回的数据示例（如果 item.buy 是一个数组，那么这将解释您所看到的内容）并说明您希望如何显示这个嵌套数组数据.
已编辑，我已包含 API 数据
您是否看到任何控制台错误？我希望dataDepth.map 抛出，因为返回的数据是对象而不是数组。
@evolutionxbox 它被放入一个数组：dataDepth: [getData.data],，所以map 只迭代一次。

标签： javascript reactjs api axios

【解决方案1】：

我认为你的数组太多了。

试试这个：

 componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      console.log(getData);
      this.setState({
        dataDepth: getData.data,
      });
    });
  }
  render() {
    const dataBuy = this.state.dataDepth.buy.map(([num ,decimal], index) => {
      return <li key={index}>{num}{decimal}</li>;
    });

    return (
      <div>
        <h1>Coba get data</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

【讨论】：

感谢您的回复！我得到的是这个错误：× TypeError: Cannot read property 'map' of undefined
@Buddgee 首先确保this.setState.dataDepth 不是未定义的。
这表明您的数据不是您提到的或未定义的。从地图中删除.buy
表示promise还没有解析，数据也没有加载，但是UI渲染了，数据未定义。你需要创建一个微调器来加载 UI，直到 promise 被解决
在componentDidMount 中将dataDepth 设置为getData.data.buy 并从map 中删除.buy.

【解决方案2】：

如果您知道子数组的值始终相同，则可以简单地定义元素 [0] 和 [1]。

代码沙盒 => https://codesandbox.io/s/suspicious-chebyshev-1tri3?file=/src/App.js:0-449

下面的代码怎么样，

import React from "react";

const apiData = {
  buy: [
    [447500000, "0.03443557"],
    [447216000, "0.00022361"],
    [447198000, "0.00234181"],
    [447142000, "0.00002564"]
  ]
};

export default function App() {
  const listItems = apiData.buy.map((item) => {
    return (
      <li>
        {item[0]}{item[1]}
      </li>
    );
  });

  return (
    <div className="App">
      <ul>{listItems}</ul>
    </div>
  );
}

【讨论】：

【解决方案3】：

由于 OP 的预期响应发生了变化，这会让你成为你想要的样子。

  componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      console.log(getData);
      this.setState({
        dataDepth: getData.data.buy,
      });
    });
  }
  render() {
    const dataBuy = this.state.dataDepth.map(([number], index) => {
      return <li key={index}>{number}</li>;
    });

    return (
      <div>
        <h1>Coba get data</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

https://codepen.io/nihiser-the-sans/pen/MWbgzLY

【讨论】：

谢谢谢谢！这解决了它！是的，我最初误解了 API 数据，最后用正确的数据更新了它。谢谢！