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

Question

我是编码初学者，现在我也在学习 React API。 在这种情况下，我从 API 获取的数据有问题，无法显示，请大家帮我如何显示这些数据。

 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;

在此处输入图片说明

Answer 1

实际上，您的useEffect返回了一个承诺。 如果您查看useEffect API docs ，您可以看到 useEffect 返回的函数是一个清理函数。 你看到这里的问题了吗？ 使用您的代码， useEffect 将始终返回承诺而不是函数。

要在 useEffect 中执行异步代码，您必须创建一个作用域异步函数并在 useEffect 中执行它，如下例所示：

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

也许这对你有用：

 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>

祝你好运...

Answer 3

可以使用 TypeScript 解释从您的请求中收到的 JSON 架构，如下所示：

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>
  }
}

在这些代码行中，

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

您试图在<div>标签内打印出一个对象（准确地说是Hit类型），这是不可能的。 <div>内只允许打印字符串和字符串数组

例如，下面的代码片段将起作用：

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

另一个 hack 是使用JSON.stringify将整个响应数据对象转换为字符串，如下所示：

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