Reactjs 如何使用功能组件在Flatlist中显示json数据？

我正在学习react native，现在遇到了一个错误，使用功能组件在json的平面列表中显示数据。我不确定这是否已经被讨论过，但我经常遇到使用类组件而不是函数组件的教程

代码如下：

import React, { useEffect, useState } from "react";
import { View, StyleSheet, Button, FlatList } from "react-native";
import { ListItem, Avatar } from "react-native-elements";

function Users(props) {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);

  const url = `https://randomuser.me/api/?page=${page}&results=10&seed=abc`;

  const getdata = () => {
    fetch(url, {
      method: "GET",
      //Request Type
    })
      .then((response) => response.json())
      //If response is in json then in success
      .then((responseJson) => {
        //Success
        setData([...data, responseJson]);
      })
      //If response is not in json then in error
      .catch((error) => {
        //Error
        console.error(error);
      });
  };
  useEffect(() => {
    getdata();
  }, []);
  return (
    <View style={styles.container}>
      <FlatList
        data={data.results}
        renderItem={({ item }) => (
          <ListItem
            title={item.gender}
            // subtitle={item.name.last}
            // Avatar={{ uri: item.picture.thumbnail }}
          />
        )}
        keyExtractor={(item) => item.email}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center",
    alignItems: "center",
  },
});

export default Users;

import React，{useffect，useState}来自“React”；
从“react native”导入{View，StyleSheet，Button，FlatList}；
从“react native elements”导入{ListItem，Avatar}；
功能用户（道具）{
const[page，setPage]=useState（1）；
const[data，setData]=useState（[]）；
常量url=`https://randomuser.me/api/?page=${page}&results=10&seed=abc`；
常量getdata=（）=>{
获取（url{
方法：“获取”，
//请求类型
})
.then（（response）=>response.json（））
//如果响应是json格式的，则表示成功
.然后（（responseJson）=>{
//成功
setData（[…data，responseJson]）；
})
//如果响应不是json格式的，则为错误
.catch（（错误）=>{
//错误
控制台错误（error）；
});
};
useffect（（）=>{
getdata（）；
}, []);
返回(
(
)}
keyExtractor={（项）=>item.email}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
内容：“中心”，
对齐项目：“中心”，
},
});
导出默认用户；

但是，我在我的应用程序中看不到数据。有什么帮助吗