React.js - 无法获取 API

Question

I am trying to build an API website for my portfolio using the NASA Image and Video Library API. When I type in the fetch in my browser ( https://images-api.nasa.gov/search?q=%22%22 ), the collection pops up. Yet when I try to fetch it in React.js, nothing shows!

I've tried axios, and trying different searches, using state and consts, and the fetch never gives me anything.

Here is my App code, please help if you can I'm so excited to make this website but I can't get past this bug:

    import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Test from "./components/test";
import axios from "axios";


export default function App() {

  const [data, setData] = React.useState([]);

  async function getData() {
    await fetch("https://images-api.nasa.gov/search?q=apollo")
    .then(res => setData([res]));

  }

  return (
    <Router>
    <Switch>
      <Route exact path="/">
        <ul>
          {data}
        </ul>
        {/* LANDING PAGE + Picture of the Day*/}
      </Route>
      <Route path="/browse">
        {/* Most Popular Pictures */}
      </Route>
      <Route path="/mars-rover">
        {/* Mars Rover */}
      </Route>
    </Switch>
    </Router>
  );
}

Answer 1

You will need to call your getData function like so

  React.useEffect(() => {
    getData();
  },[]);