Как я могу сделать массив вложенный в другой массив с помощью React - PullRequest
Новая
       4

Как я могу сделать массив вложенный в другой массив с помощью React

1 голос
/ 25 февраля 2020

Я пытаюсь создать конвертер валют и хочу показать список с валютой и значением. Я получаю некоторые данные, используя ax ios из API, и мои данные выглядят так: 

Object {type: "li", key: "0", ref: null, props: Object, _owner: null…}
type: "li"
key: "0"
ref: null
props: Object
 children: Array[33]
 0: Object
  name: "AUD"
  value: 1.5167896679
 1: Object
 2: Object

...

Когда я пытаюсь отобразить карту данные, которые он ничего не показывает: 

import React from "react";
import axios from "axios";

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: null,
      fromCurrency: "USD",
      currencyList: []
    };
  }

  componentDidMount() {
    this.getCoinTypes();
  }

  getCoinTypes() {
    let currency = [];

    axios
      .get(
        `https://alt-exchange-rate.herokuapp.com/latest?base=${
          this.state.fromCurrency
        }`
      )
      .then(response => {
        currency.push(
          Object.keys(response.data.rates).map(k => ({
            name: k,
            value: response.data.rates[k]
          }))
        );

        this.setState({
          currencyList: currency
        });

        this.state.currencyList.map((val, index) => {
          return console.log(<li key={index}>{val}</li>);
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    return (
      <table className="table table-sm bg-light mt-4">
        <thead>
          <tr>
            <th scope="col" />
            <th scope="col" className="text-right pr-4 py-2">
              5.00
            </th>
          </tr>
        </thead>
        <tbody>
          {this.state.currencyList.map((val, index) => {
            <tr key={index}>
              <th>{index}</th>
              <th>{val}</th>
            </tr>;
          })}
        </tbody>
      </table>
    );
  }
}

export default Table;

Я хочу достичь, например:

  • USD 1,00
  • AUD 1,95

и так далее ...

Ссылка на песочницу

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Это то, что вам нужно? https://codesandbox.io/s/react-props-practice-tsvbu

Если да, то я сохранил «метку» валюты (USD, AUD и т. Д. c) и ее значение (1,00, 1,69 и т. Д.) c)

0 голосов
/ 25 февраля 2020

Вот рабочая песочница с кодом

https://codesandbox.io/embed/react-props-practice-94t49?fontsize=14&hidenavigation=1&theme=dark

Изменено это в строке 60 таблицы. Jsx 

          {this.state.currencyList.map((val, index) => {
            return (
              <tr key={index}>
                <th>{index}</th>
                <th>{val.value}</th>
              </tr>
            );
          })}
...