SetState scheint nicht zu aktualisieren

Question

Ich arbeite an einer sehr einfachen reaktions-nativen App, wo ich den Namen eines Künstlers in einem Suchfeld eintippe, eine Liste von Künstlern aus der Spotify-API abrufe und diese Liste in FlatList anzeigen Komponente.

Ich bekomme die Liste der Künstler und ich möchte es im lokalen Zustand speichern, so dass ich es an die FlatList-Komponente übergeben.

Die Liste Objekt sieht wie folgt aus: [{...}, {...}, {...}, {...}]

Aber es scheint nicht zu arbeiten und ich denke, dass mein Zustand nicht aktualisiert wird und ich nicht weiß, was ich falsch mache.

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 } 
     /> 
     <List> 
      <FlatList 
      data={this.state.artists} 
      //renderItem={({item}) => <Text>{item.name}</Text>} 
      /> 
     </List> 

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

     </View> 
    ); 
    } 

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

} 

Vielen Dank für Ihre Hilfe.

UPDATE

ich ohne Erfolg mit diesem auch versucht:

<List> 
     <FlatList 
     data={this.state.artists} 
     renderItem={({ item }) => (
      <ListItem 
      roundAvatar 
      title={item.name} 
      avatar={{ uri: item.images[0].url }} 
      /> 
     )} 
     /> 
    </List> 

Answer 1

In der makeQuery Funktion können Sie die Antwort vom Server wie ..

makeQuery = debounce(query => { 
searchArtist(query) 
    .then((artists) => { 
    console.log(artists); // I have the list 
    this.setState({ 
     artists: artists, //Here is the change 
    }); 
    }) 
    .catch((error) => { 
    throw error; 
    }); 
}, 400);