Los datos devueltos de https://reqres.in/api/users?page=2 no son una matriz, sino un objeto con una propiedad data que contiene lo que está buscando (una matriz). El resultado de la solicitud es:

 {"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

Por lo tanto, no puede usar la función de mapa , que es del prototipo Array , en el resultado de su solicitud. Primero debe acceder a la propiedad de datos:

 this.state.data.data.map((data, index) => ( // note the double data <li key={index}>Email: {data.email}</li> ))

También puede asignar json.data a state.data para evitar el feo .data.data :

 this.setState({ isLoaded: true, data: json.data, // note the .data });

No veo ningún error, está funcionando bien.

Producción:

Ejemplo de trabajo: StackBlitz

 import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Constants from 'expo-constants'; class App extends React.Component { constructor(props) { super(props); this.state = { data: [], isLoaded: false, }; } componentDidMount() { fetch('https://reqres.in/api/users?page=2') .then((res) => res.json()) .then((json) => { console.log(json.data); this.setState({ isLoaded: true, data: json.data, email: null, }); }); } render() { var { isLoaded, data } = this.state; if (!isLoaded) { return <div>Is isLoaded</div>; } else { return ( <div> <div className="contents home"> <img src="https://trucard.io/india/wp-content/uploads/2021/08/2021-June-TruCard-Logo.png " width={50} alt="img" className="trucard-img" /> </div> <div className="button"> <button className="button-button">Load list</button> </div> <ul> {this.state.data?.map((data, index) => ( <li key={index}>Email: {data.email}</li> ))} ; </ul> </div> ); } } } export default App;

Creo que el problema está entre paréntesis alrededor de su método .map(). por favor intente esto

 class Home extends Component { constructor(props) { super(props); this.state = { data: [], isLoaded: false, }; } componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then(res => res.json()) .then(json => { this.setState({ isLoaded: true, data: json, }); }); } render() { const { isLoaded, data } = this.state; if (!isLoaded) { return <div>Is isLoaded</div>; } else { return ( <div> <ul> {data?.map((data, index) => { return <li key={index}>Email: {data.email}</li>; })} </ul> </div> ); } } } export default Home;