javascript - SetState 似乎没有更新

Question

我正在开发一个非常简单的 react 原生应用程序，我在搜索框中输入艺术家的名字，从 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);