Javascript 我应该如何在我的组件中引用来自API的数据

App.js

import { Text, View, Button, FlatList } from 'react-native';
import { useEffect, useState } from 'react';
import * as React from 'react';

const API = 'https://randomuser.me/api/users/';

const User = (props) => (
  <View>
    <Text>Name: {props.fname} {props.lname}</Text>
    <Text>Country: {props.country}</Text>
  </View>
);
const renderUser = ({item}) => <User fname={item.results[0].name.first} lname={item.results[0].name.last} country={item.results[0].location.country}/>;

export default function App() {
  const [users, setUsers] = useState({});

  useEffect(() => {
  fetch(API)
  .then((response) => response.json())
  .then((json) => {setUsers(json);});}, []);

  return (
    <View>
      <Text>{}</Text>

      <Button title="add a user" onPress={() => {
        fetch(API)
        .then((response) => response.json())
        .then((json) => {setUsers(json);}), []}}
      />

      <FlatList data={users} renderItem={renderUser}/>

    </View>
  );
}

当我创建用户时，我应该如何引用json中的名字和姓氏以及国家？在网上查看后，我认为这(item.Results[0].name.first)是我应该引用它的方式，但它仍然不起作用.我做错了什么？