componentDidMount() 返回一个未定义的值

Posted 2023-03-12

【中文标题】componentDidMount() 返回一个未定义的值

【英文标题】：componentDidMount() returns an undefined value

【发布时间】：2021-04-11 21:49:47

【问题描述】：

目标

我的目标是调用 componentDidMount() 函数从另一个名为 getUserPlaylists() 的方法返回一些值。

问题

我遇到的问题是componentDidMount() 显示了undefined 的值，getUserPlaylists() 显示了数组的结果。

实际结果

代码

在 Spotify.js 文件中，我有以下代码：

const clientId = 'Cleint ID Here';
const redirectUri = 'http://localhost:3000/';

let accessToken;
let userId;

const Spotify = 
    getAccessToken() 
        if (accessToken) 
            return accessToken;
        
        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
        const expiryInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch && expiryInMatch) 
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiryInMatch[1]);
            window.setTimeout(() => accessToken = '', expiresIn * 10000);
            window.history.pushState('Access Token', null, '/');
            return accessToken;
         else 
            const accessUrl = `https://accounts.spotify.com/authorize?client_id=$clientId&response_type=token&scope=playlist-modify-public&redirect_uri=$redirectUri`;
            window.location = accessUrl;
        
    ,

    async getUserPlaylists() 
        await Spotify.getCurrentUserId().then(userId => 
            const accessToken = Spotify.getAccessToken();
            const headers =  Authorization: `Bearer $accessToken` ;
    
            fetch(` https://api.spotify.com/v1/users/$userId/playlists`, 
                headers : headers
            )
            .then(res => res.json())
            .then(res => 
                if(!res.items) 
                    return [];
                 else 
                    console.log(res.items)
                    return res.items;
                
            )
        )
    ,

    getCurrentUserId() 
        if (userId) 
            return new Promise((resolve) => 
                resolve(userId);
            )
         else 
            return new Promise((resolve) => 
                const accessToken = Spotify.getAccessToken();
                const headers =  Authorization: `Bearer $accessToken` ;
    
                return fetch("https://api.spotify.com/v1/me",  headers: headers )
                    .then(res => res.json())
                    .then(jsonRes => 
                        userId = jsonRes.id;
                        resolve(userId);
                    );
            )
        
    


export  Spotify ;

总结

我的 app.js 文件中有 3 个可以作为方法调用的对象。

这是我在 app.js 文件中调用 componentDidMount() 的方式：

  async componentDidMount() 
    const val = await Spotify.getUserPlaylists();
    console.log(val)
  

预期结果

componentDidMount() 应该返回与getUserPlaylists() 相同的值

问题

我不明白为什么 componentDidMount() 返回的值是 undefined？

【问题讨论】：

getUserPlaylists don't' have return statement :P

@Robert 是的，如下面的回答中所述：P - 没想到......

【参考方案1】：

因为你没有从getUserPlaylists返回任何东西

async getUserPlaylists() 
        // here return missed
        return await Spotify.getCurrentUserId().then(userId => 
            const accessToken = Spotify.getAccessToken();
            const headers =  Authorization: `Bearer $accessToken` ;
    
            // here return too
            return fetch(` https://api.spotify.com/v1/users/$userId/playlists`, 
                headers : headers
            )
            .then(res => res.json())
            .then(res => 
                if(!res.items) 
                    return [];
                 else 
                    console.log(res.items)
                    return res.items.map(playlist => (
                        playlistId: playlist.id,
                        playListName: playlist.name
                    ));
                
            )
        )
    ,

您可以简单地使用下面的代码，它的作用相同

async getUserPlaylists() 
  // here return missed
  try 
    const userId = await Spotify.getCurrentUserId()
    const accessToken = Spotify.getAccessToken();
    const headers =  Authorization: `Bearer $accessToken` ;
    // here return too
    const result = await fetch(` https://api.spotify.com/v1/users/$userId/playlists`,  headers )
    const res = await result.json()
    if(!res.items) return [];
    console.log(res.items)
    return res.items.map(playlist => (  playlistId: playlist.id, playListName: playlist.name ));
   catch(err) 
    console.log( err )
  

【讨论】：

console.log(res.items) 下面呢？这就是我返回的对吗？因为console.log.. 是返回数组的那行代码。我期待返回 res.items...

的值

所以，问题是你在then chain里面返回，你应该返回整个promise结果。要了解更多信息，请阅读this references

是的，我明白了.. 我没有把 return 放在它们应该放在的位置。好的，吸取了这个教训。我没想到会这样..