javascript - 无法在 FlatList 中显示 spotify api 查询的结果

Question

我正在开发一个非常简单的 react 原生应用程序，我在搜索栏中输入艺术家的名字，并显示我使用 spotify api 获得的艺术家的平面列表。

我有 2 个文件，我的 App.js 负责渲染，而 fetcher.js 则实现 api 调用。

但我无法显示列表，无法设置艺术家的状态。

App.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  StatusBar,
  TextInput,
} from 'react-native';

import colors from './utils/colors';
import { List, ListItem, SearchBar } from 'react-native-elements';
import { searchArtist } from './utils/fetcher';
import { debounce } from 'lodash';


export default class spotilist extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      query: '',
      artists: [],
      error: null,
      refreshing: false,
    };
  }


  render() {
    return (
      <View style={ styles.container }>
        <StatusBar barStyle="light-content" />
        <TextInput style={ styles.searchBox }
          value={this.state.value}
          onChangeText={ this.makeQuery }
        />
        <Text> {this.state.artists}  </Text>
      </View>
    );
  }

  makeQuery = debounce(query => {
    searchArtist(query)
      .then((artists) => {
        this.setState({
          artists: this.state.artists,
        });
        //console.log(artists)
      })
      .catch((error) => {
        throw error;
      });
  }, 400);

}


const styles = StyleSheet.create({
  container: {
    paddingTop: 64,
    flex: 1,
    backgroundColor: colors.white,
  },
  searchBox: {
    height: 40,
    borderColor: colors.black,
    borderWidth: 2,
    margin: 16,
    paddingLeft: 10,
    fontWeight: '800',
  },
  row: {
    flex: 1,
    margin: 30,
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
});

fetch.js

export function searchArtist(query) {

  const ClientOAuth2 = require('client-oauth2')

  console.log("Query : " + query)

  const spotifyAuth = new ClientOAuth2({
    clientId: CLIENT_ID,
    clientSecret: CLIENT_SECRET,
    accessTokenUri: 'https://accounts.spotify.com/api/token',
    authorizationUri: 'https://accounts.spotify.com/authorize',
    scopes: []
  })

  spotifyAuth.credentials.getToken()
    .then((user) => user.accessToken)
    .then((token) => getQuery(token, query))
    .then((result) => {
      console.log(result) // No list :(
      return result
    });
}

function getQuery(token, query) {

  console.log("Query2 : " + query)

  const settings = {
    "url": `https://api.spotify.com/v1/search?q=${ query }&type=artist`,
    "method": "GET",
    "headers": {
      "authorization": "Bearer " + token,
      "cache-control": "no-cache",
    }
  }

  fetch(settings)
    .then((res) => res.json())
    .then(data => {
      const artists = data.artists ? data.artists.items : [];
      console.log(artists)  // I get the list in the debbuger
      return artists;
    });
}

感谢您的帮助。

Answer 1

您只需在 getQuery 中返回 fetch promise

function getQuery(token, query) {

  console.log("Query2 : " + query)

  const settings = {
    "url": `https://api.spotify.com/v1/search?q=${ query }&type=artist`,
    "method": "GET",
    "headers": {
      "authorization": "Bearer " + token,
      "cache-control": "no-cache",
    }
  }

  return fetch(settings)
    .then((res) => res.json());
}

然后当你打电话时

spotifyAuth.credentials.getToken()
    .then((user) => user.accessToken)
    .then((token) => getQuery(token, query))
    .then((result) => {
      console.log(result) // No list :(
      return result
    });

getQuery 将返回此 promise ，您可以像之前在 getQuery 中那样处理它:

return spotifyAuth.credentials.getToken()
    .then((user) => user.accessToken)
    .then((token) => getQuery(token, query))
    .then(data => {
      return data.artists ? data.artists.items : [];
    });

然后你可以简单地返回这个 promise 并在任何你想要的地方处理