尝试使用 React Hook 和 Axios 显示来自我的 API 的数据，但没有渲染

Question

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

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

"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。

应用程序.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 问题。 我不知道其他语言，但如果您使用专家，您可以通过添加 CORS 中间件轻松纠正它。

Yarn add CORS

在你的索引文件中

Const cors = require(`cors`)

//After express initialization

app.use(cors)

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

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

Answer 3

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

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