嘿，所以我正在開發一個使用 spotify Api 的 react-native 應用程式。我目前正在嘗試呼叫回傳用戶播放串列的端點。我希望應用程式作業的方式是，當用戶按下按鈕時，它會呼叫 api 并獲取用戶的播放串列。這就是我的代碼的樣子：
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>
)
}
API呼叫對我來說很好，這就是回傳資料的樣子
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",
我收到 [未處理的承諾拒絕：TypeError: undefined is not an object (evalating 'data.item.name')] 所以我猜問題出在我的渲染項上？
uj5u.com熱心網友回復：
問題在于handleGetPlaylists：
data.items.name.map(obj => result.push({title: [obj.name]}));
根據 API 回應，您可能想要這樣：
data.items.map(obj => result.push({title: [obj.name]}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469252.html
標籤：javascript 安卓 反应 反应式 api