SetStateが更新されないようです

Question

私は検索ボックスにアーティストの名前を入力し、spotify APIからアーティストのリストを取得し、このリストをFlatListに表示する非常に単純な反応ネイティブアプリを開発中です成分。

私はアーティストのリストを取得できます。ローカルの状態で保存して、FlatListコンポーネントに渡します。

リストオブジェクトは、次のようになります。

[{...}、{...}、{...}、{...}]しかし、動作するようには思えないし、I私の状態は更新されていないと私は間違って何をしているのか分からないと思う。

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

} 

ありがとうございました。

UPDATE

また、私は成功せず、これを使用してみました：あなたのようなサーバからの応答を設定する必要がありmakeQuery機能で

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

Answer 1

..

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