Самая плоская выборка массива теперь показывает реакцию родного - PullRequest
Новая
       27

Самая плоская выборка массива теперь показывает реакцию родного

0 голосов
/ 14 декабря 2018

Я не получаю никаких элементов из моего массива API, и он не попадает в мой самый плоский.Я хочу создать таблицу лидеров, извлекая имя пользователя и баллы из моего API, который является массивом.

внизу - это то, что у меня есть для моего проекта, я вынул API.Понятия не имею, что здесь происходит.

Я использую метод выборки async / await. 

export default class HomeScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],}
}

async getLeaderBoard() {
    try {
        let response = await fetch('api_here', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                Authorization: 'Bearer + token'

            },
        });
        let responseJson = await response.json();
        return responseJson;
    } catch (error) {
        console.log('There has been a problem with your fetch operation: ' + error.message);
        throw error;
    };
}


componentDidMount() {
    this.getLeaderBoard()
}

renderItem = ({ item, index }) => {
    console.log(item.title);
    this._carousel.triggerRenderingHack();
    return (
        <Image style={{ width: 100, height: 200, borderRadius: 12, marginTop: 10 }} source={{ uri: item }} />
    );
}

render() {
    return (<View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height, alignItems: 'center' }}>


        <View style={{ flex: 1, flexDirection: 'column' }}>
            <Text style={{ marginTop: 50 }}>LEADER BOARD</Text>
        </View>
        <FlatList
            data={this.state.getLeaderBoard}
            keyExtractor={(x, i) => i}
            renderItem={({ item }) =>
            <Text>
                {`${item.name} ${item.points}`}
            </Text>
            }>
        </FlatList>
    </View>)
}

}

1 Ответ

0 голосов
/ 14 декабря 2018

Проблема в том, что вы нигде не храните данные.Ваш метод getLeaderBoard не является частью государства, вы его неправильно поняли.Вы должны сделать следующее:

Ваш метод getLeaderBoard: 

async getLeaderBoard() {
   try {
       let response = await fetch('api_here', {
           method: 'GET',
           headers: {
               Accept: 'application/json',
               Authorization: 'Bearer + token'

           },
       });
       let responseJson = await response.json();
       this.setState({data : responseJson}) // Store the API response on the state
   } catch (error) {
       console.log('There has been a problem with your fetch operation: ' + error.message);
       throw error;
   };
}

Ваш метод рендеринга: 

render() {
   return (<View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height, alignItems: 'center' }}>


       <View style={{ flex: 1, flexDirection: 'column' }}>
           <Text style={{ marginTop: 50 }}>LEADER BOARD</Text>
       </View>
       <FlatList
           data={this.state.data}  // The data is passed to the list
           keyExtractor={(x, i) => i}
           renderItem={({ item }) =>
           <Text>
               {`${item.name} ${item.points}`}
           </Text>
           }>
       </FlatList>
   </View>)
}

Я рекомендую прочитать состояние и документация по жизненному циклу

...