如何使用 FlatList 在 React Native 中显示数组元素

Question

我正在尝试从 API 获取数据并将其显示在响应中的 FlatList 组件中。但是当显示数组中的数据时，它会显示一个空白屏幕。下面是我的代码

useEffect(() => {
        axios.get(`https://api.github.com/users/${user}/repos`)
        .then(response => {
            console.log(response.data)
            response.data.map(repo => {
                let rep = {
                    id:repo.id,
                    name:repo.name,
                    created:repo.created_at,
                    url:repo.html_url
                }
                repos.push(rep)
            })
            console.log(repos)
        })
        .catch(err => {
            setError(true)
            console.log(err)
        })
    },[])

   

    return (
        <View>
            <Header navigate={navigation}/>
            <FlatList
                contentContainerStyle={{backgroundColor:'grey',marginTop:25}}
                data={repos}
                renderItem={({repo}) => (
                    <Text>
                        {repo.name}
                    </Text>
                )}
            />
        </View>
    )

Answer 1

试试这个方法

const [data, setData] = useState([]);

useEffect(() => {
        axios.get(`https://api.github.com/users/${user}/repos`)
        .then(response => {
            setData(response.data);
        })
        .catch(err => {
            setError(true)
            console.log(err)
        })
    },[])

   

    return (
        <View>
            <Header navigate={navigation}/>
            <FlatList
                data={data}
                renderItem={(item) => (
                    <Text>
                        {item.name}
                    </Text>
                )}
            />
        </View>
    )

Answer 2

这是完整的工作示例：Expo Snack

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import axios from 'axios';

export default function App() {
  const [repos, setRepos] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    axios
      .get(`https://api.github.com/users/theketan2/repos`)
      .then((response) => {
        let data = [];
        //console.log(response.data);
        response.data.map((repo) => {
          let rep = {
            id: repo?.id,
            name: repo?.name,
            created: repo?.created_at,
            url: repo?.html_url,
          };
          data.push(rep);
        });
        // console.log(data);
        setRepos(data);
      })
      .catch((err) => {
        setError(true);
        console.log(err);
      });
  }, []);

  useEffect(() => {
    console.log(repos);
  }, [repos]);
  return (
    <View style={styles.container}>
      <FlatList
        data={repos}
        renderItem={({item}) => (
          <View style={styles.list}>
            <Text>{item?.name}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(21,21,21,0.1)',
  },
  list: {
    padding: 10,
    marginTop: 5,
    borderRadius: 5,
    backgroundColor: 'white',
    marginHorizontal: 5,
  },
});

如何使用 FlatList 在 React Native 中显示数组元素

How to display array elements in react native using FlatList

react-native

react-native-flatlist