尝试使用 React Hook 和 Axios 显示来自我的 API 的数据，但没有呈现任何内容

Question

设计师创建了我的第一个全栈应用程序，以更好地理解更复杂的开发概念。我目前无法从我的 React 应用程序获取浏览器中显示的数据。但是，与以前的障碍不同，我没有得到实际的搜索错误，所以我不确定我在哪里遇到了问题。

客户端和服务器似乎加载正常（分别为 localhost:3000 和 :8000），但我非常简单的 app.js 客户端没有显示任何内容。在终端窗口中，我确实看到了：

"Executing (default): SELECT "id", "title", "subtitle", "lyric", "published", "createdAt", "updatedAt" FROM "playlists" AS "playlists"; GET /api/playlists 200 49.085 ms - 463

所以看起来 GET 请求可能正在工作，但我正盯着浏览器中的空白屏幕。任何帮助，将不胜感激。很高兴提供更多信息，但我会在下面添加 app.js。

App.js

import React, { useState, useEffect }from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ playlists: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios('http://localhost:8000/api/playlists');
      setData(result.data);
    };
    fetchData();
  }, [] );

  return (
    <div>
      All Playlists
       <ul>
        {data.playlists && data.playlists.map(playlist => (
          <li key={playlist.id}>
           {playlist.title}{playlist.subtitle}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Answer 1

你必须在axios中设置请求方法：

所以如果是GET:

const result = await axios.get('http://localhost:8000/api/playlists');

Answer 2

我相信这是一个 CORS 问题。我不知道其他语言，但如果您使用 experss，您可以通过添加 CORS 中间件轻松纠正它。

Yarn add CORS

在你的索引文件中

Const cors = require(`cors`)

//After express initialization

app.use(cors)

您当然可以扩展配置，但这样做会解决您的问题。

https://www.npmjs.com/package/cors

Answer 3

您不需要在初始状态值中包含带有数组的对象，因为您可以在同一个组件中拥有多个 useStates。您可以将初始状态值设置为空数组。我会将const [data, setData] = useState([]); 重命名为const [playlists, setPlaylists] = useState([]) 以使其更具可读性。现在在您的地图中，您可以使用：

  <ul>
    {playlists.map(playlist => (


        <li key={playlist.title}>
          {playlist.title}
          {playlist.subtitle}
        </li>

    ))}
  </ul>

你的整个组件看起来像：

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [playlists, setPlaylists] = useState([]);


  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
      'http://localhost:8000/api/playlists'
    );
    setPlaylists(result.data);
  };
    fetchData();
  }, []);

  return (
    <div>
      All Playlists
      <ul>
        {playlists.map(playlist => (


            <li key={playlist.title}>
              {playlist.title}
              {playlist.subtitle}
            </li>

        ))}
      </ul>
    </div>
  );
}

export default App;