SetState似乎沒有更新

Question

我正在開發一個非常簡單的本地本機應用程序，在該應用程序中，我在搜索框中鍵入藝術家的名字，從spotify API中檢索藝術家的列表，然后在FlatList組件中顯示該列表。

我設法獲取藝術家列表，並希望將其保存在本地狀態，以便將其傳遞給FlatList組件。

列表對象如下所示：[{...}，{...}，{...}，{...}]

但這似乎不起作用，我認為我的狀態沒有更新，並且我不知道自己在做什么錯。

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

}

謝謝您的幫助。

更新

我也嘗試使用這個沒有成功：

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

Answer 1

在makeQuery函數中，您需要像這樣設置服務器的響應。

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