SetState似乎没有更新

Question

I'm working on a very simple react-native app where I type the name of an artist in a searchbox, retrieve a list of artists from the spotify API and I display this list in FlatList component.

I manage to get the list of artists and I want to save it in the local state so that I pass it to the FlatList component.

The list object looks like this : [{...}, {...}, {...}, {...}]

But it doesn't seem to work and I think that my state is not updating and I don't know what I'm doing wrong.

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

}

Thank you for your help.

UPDATE

I also tried using this without success :

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

Answer 1

In the makeQuery function you need to set the response from the server like..

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