时间戳

首页 > 解决方案 > 同时处理两个API

javascript - 同时处理两个API

问题描述

我想使用 React 从 API 加载行星数据并将这些数据放入 Material UI 卡组件中。不幸的是，我使用的行星 API 没有照片，我也想在卡片中显示。为此，我正在使用另一个 API。

获取行星数据的 API：https
: //api.le-systeme-solaire.net/rest 获取行星图像的 API：https ://images-api.nasa.gov/search

我已经想出了如何将每个行星组件及其各自的信息渲染到一张卡片中，但不知道如何将每个 NASA 图像映射到各自的行星：

这是App.js组件的代码：

import React, {useState, useEffect} from 'react';
import './App.css';
import axios from 'axios'
import Block from "./Block"


function App() {
  const [planets, setPlanets] = useState([])
  const [images, setImages] =useState([])
 
  const getPlanets = async()=>{
    const data = await fetch
    ('https://api.le-systeme-solaire.net/rest/bodies') //Await for first fetch promise to resolve
    const planets = await(data.json()) //Await for data.json to resolve and save this planets

    setPlanets(planets.bodies.filter 
        (planet =>planet.isPlanet && planet.name.indexOf('1')===-1)) 
  }

  const getImages = (name)=>{
    axios.get('https://images-api.nasa.gov/search',{
      params:{
        q: name
      }
    })
    .then(res => 
      setImages(images.concat(res.data.collection.items[0].links[0].href)))
  } 

  console.log(planets)   

  useEffect(()=>{
    getPlanets();
  },[])
  
  useEffect(()=>{
    if(planets){
      planets.map(planet =>getImages(planet.englishName))
    }
  },[])

 console.log(images)
 console.log(planets.length)

  return (
    <div className="App">
      {planets.map(planet => 
        (<Block 
          key = {planet.id}
          id = {planet.id}
          name = {planet.englishName}
          dateDiscovered = {planet.discoveryDate}
          mass = {planet.mass.massValue}
          massExp = {planet.mass.massExponent}
          image = ???
        />)
      )}
    </div>
  );
}

export default App;

Block.js的代码如下：

import React, {useState, useEffect} from 'react'
import './Block.css'

import {Card, CardContent} from '@material-ui/core'
function Block(props){
    return (
        <div>
            <Card>
                <CardContent>
                    <div className = "planetInfo">
                        <h4>{props.name}</h4>
                        <h5>Mass: {props.mass}*10^{props.massExp} kg</h5>
                        <h5>Discovery Date: {props.dateDiscovered}</h5>
                        <h5>ID: {props.id}</h5>
                        <img src = {props.image}/>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}


export default Block

我感觉我的结构不对。任何帮助，将不胜感激。

标签： javascriptreactjsapifetch

解决方案

您可以根据数组索引轻松映射行星和图像 - 假设：

你按顺序检索它们

因为有 8 个行星，所以会有 8 个图像；所以你的Array.map函数看起来像：

 {planets.map((planet,index) => 
  (<Block 
  key = {planet.id}
  id = {planet.id}
  name = {planet.englishName}
  dateDiscovered = {planet.discoveryDate}
  mass = {planet.mass.massValue}
  massExp = {planet.mass.massExponent}
  image = images[index]
  
  />))}

推荐阅读