遇到未預期的Spotify API回應的React程式碼-PHP中文網路問答

我正在使用Spotify API在React中製作應用程式。

首先，我使用我的clientID和clientSecret取得存取權杖。然後，我試圖使用此令牌來取得userID。文件中提到需要進行get請求並將令牌作為標頭傳遞。

問題是，我總是得到401錯誤代碼的回應。文件提到，這個錯誤可能是因為令牌已過期。但在我的程式碼中，我在獲得令牌後立即嘗試取得userID。

我的第二個問題是關於在React中進行請求。如您所見，我使用了useEffect鉤子來實現，但我不確定這是否是正確的方法。此外，我進行第二個請求的方式感覺不太好（在useEffect內部的if語句）。

非常感謝任何幫助！

P.S. apiKey和apiSecret是全域變量，第一個請求工作得很好，它返回有效的令牌，成功用於進行搜尋歌曲的另一個get請求。

const [token, setToken] = useState("");
const [userID, setUserID] = useState("");

// Obtain access token and user ID
useEffect(() => {
  // Get access token
  const parameters = {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`,
  };

  fetch("https://accounts.spotify.com/api/token", parameters)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setToken(data.access_token);
      return data.access_token;
    });
}, []);

// Obtain user ID once token is obtained
useEffect(() => {
  if (token != "") {
    const parameters = {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };

    fetch("https://api.spotify.com/v1/me", parameters)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
      });
  }
}, [token]);

const [userID, setUserID] = useState(''); useEffect(() => { // 获取访问令牌的函数 const getAccessToken = async () => { try { const response = await fetch('https://accounts.spotify.com/api/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`, }); if (!response.ok) { throw new Error('获取访问令牌失败'); } const data = await response.json(); return data.access_token; } catch (error) { console.error('获取访问令牌时发生错误:', error); return null; } }; // 获取用户ID的函数 const getUserID = async () => { const accessToken = await getAccessToken(); if (accessToken) { try { const response = await fetch('https://api.spotify.com/v1/me', { method: 'GET', headers: { 'Authorization': `Bearer ${accessToken}`, }, }); if (!response.ok) { throw new Error('获取用户ID失败'); } const data = await response.json(); setUserID(data.id); } catch (error) { console.error('获取用户ID时发生错误:', error); } } }; getUserID(); }, []);