如何使用 react 显示这个 json（从 api 获取数据）

Question

I am a beginner of coding and now I learning React also API. This case I got a problem with the data I get from API, I cannot display it, could you guys please help me how to display this data.

 import React, { useEffect, useState } from "react"; function App() { const [data, setData] = useState([]); useEffect(() => { fetch("https://genius.p.rapidapi.com/search?q=X%20japan", { method: "GET", headers: { "x-rapidapi-host": "genius.p.rapidapi.com", "x-rapidapi-key": "8381c61985mshd33863649f9935ap10e015jsn75abaf8b1155", }, }) .then((res) => res.json()) .then((data) => { setData(data); console.log(data.response.hits); }) .catch((error) => console.log(error)); }, []); return ( <div className="App"> <h1>Uo</h1> <div> {data.map((item) => { <div>{item.hit[0]}</div>; })} </div> </div> ); } export default App;

enter image description here

Answer 1

Actually, your useEffect return a promise. If you check the useEffect API docs , you can see that the function returned by a useEffect is a clean up function. Do you see the problem here? With your code, the useEffect will always return a promise and not a function.

To execute async code in a useEffect, you have to create a scoped async function and execute it in the useEffect like the example below:

useEffect(() => {
   const fetchData = async () => {
      const res = await fetch('...');
      const data = await res.json();

      setData(data);
   }

  fetchData();
}, []);


return (
     <div>
        {data.map(item => (
           <div>{item.hit[0]}</div>
        ))}
     </div>
);

Answer 2

Maybe this works for you:

 function App() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch("https://genius.p.rapidapi.com/search?q=X%20japan", { method: "GET", headers: { "x-rapidapi-host": "genius.p.rapidapi.com", "x-rapidapi-key": "8381c61985mshd33863649f9935ap10e015jsn75abaf8b1155", }, }) .then((data) => data.json()) .then((data) => { setData(data.response.hits); }) .catch((error) => console.log(error)); }, []); return ( <div className="App"> <h1>Uo</h1> {data && data.map(item => <pre> {JSON.stringify(item, null, 2)} </pre>)} </div> ); } const root = document.getElementById('root') ReactDOM.render(<App />, root)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

Good Luck...

Answer 3

The schema of the JSON received from your request can be explained using TypeScript as follow:

interface Hit {
  highlights: Array<string>
  index: string
  type: string
  result: Object
  title: string
  title_with_featured: string
  url: string
  primary_artist: Object
}

interface Response {
  meta: {
    status: number
  }
  response: { 
    hits: Array<Hit>
  }
}

In these lines of your code,

{/* ... */}
<div>
   {data.map(item => (
      <div>{item.hit[0]}</div>
   ))}
</div>
{/* ... */}

you're trying to print out an object (of type Hit to be exact) out inside <div> tag, which is not possible. Only string and array of strings are allowed to be printed out inside of <div>

For example, this code snippet below will work:

{/* ... */}
<div>
   {data.map(function (hit) {
      return (
        <div>{`Song title: ${hit.title}`}</div>
        <div>{`Performer: ${hit.primary_artist.name}`}</div>
      )}
   }
</div>
{/* ... */}

Another hack is to convert the whole responsed data object into string using JSON.stringify like this:

<div>
   {data.map(function (hit) {
      return (
        <div>{`Data: ${JSON.stringify(hit)}`}</div>
      )}
   }
</div>