Сделать компоненты из объекта axios

Question

Я сделал этот простой пример, где я получаю объект с объектами внутри с помощью Axios.Мой вопрос заключается в том, какой подход я мог бы использовать для создания разных компонентов каждого результата Axios и затем отображать их независимо.Как я хотел бы использовать их в разных местах моего веб-приложения.

class apitest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      btcticker: {},
      ethticker: {},
      trxticker: {},
      xrpticker: {},
      eosticker: {},
      bchticker: {}
    };
  }

  componentDidMount() {
    axios
      .get(
        "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
      )
      .then(res => {
        const BTCEUR = res.data.BTC;
        const ETHEUR = res.data.ETH;
        const BCHEUR = res.data.BCH;
        const EOSEUR = res.data.EOS;
        const TRXEUR = res.data.TRX;
        const XRPEUR = res.data.XRP;
        console.log(BTCEUR);
        console.log(ETHEUR);
        console.log(BCHEUR);
        console.log(EOSEUR);
        console.log(TRXEUR);
        console.log(XRPEUR);
        this.setState({ btcticker: BTCEUR });
        this.setState({ ethticker: ETHEUR });
        this.setState({ bchticker: BCHEUR });
        this.setState({ eosticker: EOSEUR });
        this.setState({ trxticker: TRXEUR });
        this.setState({ xrpticker: XRPEUR });
      });
  }

  render() {
    return (
      <div className="test">
        {Object.keys(this.state.btcticker).map(key => (
          <div id="crypto-container">
            <span className="left">{key}</span>
            <span className="right">
              <NumberFormat
                value={this.state.btcticker.EUR}
                displayType={"text"}
                decimalPrecision={2}
                thousandSeparator={true}
                prefix={"€"}
              />
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default apitest;

Answer 1

Вот пример кода: codesandbox.io/s/2vz1p9676n Крис Дж сделал решение, которое идеально подходит

Answer 2

Вы должны сделать этот компонент, где вы делаете вызов, родительским для других ваших компонентов. Затем передайте каждому компоненту только ту часть данных, которая необходима для его просмотра. В качестве альтернативы вы можете использовать что-то вроде Redux с redux saga, чтобы создать глобальное хранилище, в котором вы можете хранить кэшированные данные, а затем подключить каждый компонент к хранилищу, чтобы он мог получать необходимые данные.