Hey so I'm working on a react-native app that is using the spotify Api. I'm currently trying to call the endpoint which returns a users playlists. The way I want the app to work is that when the user presses a button it calls the api and gets that users playlists. This is what my code looks like:

export default function SpotifyGetPlaylist() {
   
    const { colors } = useTheme();
    const [token, setToken] = useState('');
    const [data, setData] = useState({});
    
    React.useEffect(() => {
        getData();
    }, []);

   const getData = async() => {
           setToken (await AsyncStorage.getItem('@access_token'));
            console.log("token retrieved")
    }

   
    let playlistSearchApi = 'https://api.spotify.com/v1/me/playlists';
    const handleGetPlaylists = () => {
        fetch(playlistSearchApi, {
            method: 'GET',
            headers: { 'Authorization': 'Bearer '   token }
          })
          .then(res => res.json())
          .then(data => {
            let result = [];
            console.log(data)
            data.items.name.map(obj => result.push({title: [obj.name]}));
            setData(result);
        });
    }
    const renderItem = ({item}) => {
        return( 
            <View style={styles.item}>
                <Text style={styles.playlistname}>{item.title[1]}</Text>
            </View>
        );
    }
    return (
        <View style={styles.container}>
            <Button onPress={handleGetPlaylists} color="#1DB954" style={{  width: 100 }} title="Get your playlists"/>
            <FlatList
            data={data}
            renderItem={renderItem}
            keyExtractor={item => item.title[1]}
            />
            
        </View>
    )
}

The API call works fine for me and this is what the return data looks like

Object {
  "href": "https://api.spotify.com/v1/users/fsjgg/playlists?offset=0&limit=20",
  "items": Array [
    Object {
      "collaborative": false,
      "description": "",
      "external_urls": Object {
        "spotify": "https://open.spotify.com/playlist/5MwIvSj1Fc8N5BQByhsLvM",
      },
      "href": "https://api.spotify.com/v1/playlists/5MwIvSj1Fc8N5BQByhsLvM",
      "id": "5MwIvSj1Fc8N5BQByhsLvM",
      "images": Array [
        Object {
          "height": 640,
          "url": "https://i.scdn.co/image/ab67616d0000b2735a037fd63963c053475b00cf",
          "width": 640,
        },
      ],
      "name": "Run",

I'm getting [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.item.name')] so I'm guessing the problem is in my render item?

CodePudding user response：

The problem is in handleGetPlaylists in the line:

data.items.name.map(obj => result.push({title: [obj.name]}));

According to the API response, you probably want this:

data.items.map(obj => result.push({title: [obj.name]}));