嘗試使用 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;