无法在FlatList

Question

我工作的一个非常简单的反应，本机应用程序，我在搜索栏中键入艺术家的名称，显示Spotify的API查询的结果，并显示艺术家，我得到了使用Spotify的的Flatlist API。

我有2个文件我App.js，做实现了API调用的渲染和fetcher.js。

但我无法去出现在列表中，我无法设置艺术家的状态。

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

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()); 
} 

然后fetch承诺，当你调用

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

getQuery将返回此承诺，就像你在getQuery以前那样，你可以处理它：

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

那么你可以简单地回复这个承诺，并处理你想要的任何地方

Answer 2

您需要通过艺术家的阵列映射。所有反应和反应原生组件不能呈现数据基元外的数据（例如字符串和数字）。

如：

{ 
    this.state.artists.map(artist => { 
    return (
     <Text key={artist.id}>{artist.name}</Text> 
    ) 
    }) 
} 

如果state.artists阵列内的元件仅仅是字符串，只返回艺术家文本元素内。

键值是反应迅速同化虚拟DOM来DOM之中的状态变化。