SetState似乎並沒有更新

我正在一個非常簡單的反應原生應用程序，我在搜索框中鍵入藝術家的名字，從spotify API中檢索藝術家列表，並在FlatList中顯示此列表零件。SetState似乎並沒有更新

我設法得到藝術家列表，我想將它保存在本地狀態，以便將它傳遞給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); 

}

謝謝您的幫助。

UPDATE

我用這個沒有成功也試過：

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

來源

2017-09-16 mandok

是否在爲'renderItem'添加道具之後還沒有渲染？ – bennygenel

@bennygenel是的，當我添加它時不工作。 – mandok

你在哪裏調用'makeQuery'方法？ –

在您需要設置從服務器一樣的響應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);

來源

2017-09-16 08:59:49 pritesh

SetState似乎並沒有更新

回答

相關問題