如何将 map 嵌套数组放入 React 列表中？

Question

我无法将 arrays 的数组映射为 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;

当前的output是：

• 4464800000.044890354464280000.000025644460200000.010089234460010000.148459314460000000.008713044458480000.000300004457940000.000256224457610000.148539244457490000.148543244...

（编辑）我的期望：

• 4464800000
• 4464280000
• 4460200000
• 4460010000
• 等等

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

API 数据是：

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

Answer 1

我觉得你的 arrays 太多了。

试试这个：

 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>
    );
  }
}

Answer 2

由于 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

Answer 3

如果您知道子数组的值始终相同，则可以简单地定义元素 [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>
  );
}