I rewrote the application under redux-thunk, a simple application that takes data from the website randomuser.me, the whole problem is in receiving data, they come in this way

[object Object], [object Object], [object Object],[object Object]

but the map function still does not accept them and displays an error.

 undefined is not an object (evalueting this.props.users)

code with map function

 componentDidMount(){ this.props.fetchData("https://randomuser.me/api/?results=5"); } render(){ if(this.props.isLoading){ return( <View style={{flex: 1, justifyContent: 'center'}}> <ActivityIndicator size="small" color="#000000" /> </View> ) } if(this.props.hasErrored){ return( <View style={{flex: 1, justifyContent: 'center', alignItems: "center"}}> <Text>Oops. some wrongs, check the connection</Text> </View> ) } const imgs = this.prop.users.map((user, index) => { return ( <TouchableOpacity key={index} style={{ flexDirection: "row", marginBottom: 5 }} onPress={() => { this.props.navigation.navigate("User", { Name: user.name.first + " " + user.name.last }); }} > <Image style={{width: 50, height: 50}} source={{uri: user.picture.medium }} /> <View style={{ flexDirection: "column", marginLeft: 15, justifyContent: "center" }}> <Text>{ user.name.first + " " + user.name.last }</Text> <Text> {user.email} </Text> </View> </TouchableOpacity> ); }); return( <ScrollView> <View style={{ margin: 10 }}> {imgs} </View> </ScrollView> ) }

action code that takes data from the internet

 export function userFetchData(url){ return(dispatch) => { dispatch(userIsLoading(true)); setTimeout(()=>{},1000); fetch(url) .then((response) => { if (!response.ok) { throw Error(response.statusText); } return response; }) .then((response) => response.json()) .then((users) => { dispatch(userFetchDataSuccess(users.results)); dispatch(userIsLoading(false)); }) .catch(() => dispatch(userHasErrored(true))); }

}

code where all this is transmitted

 export function userFetchDataSuccess(users){ return{ type: 'USER_FETCH_DATA_SUCCESS', users };

}

then everything goes to the reducer

 export function users(state = [], action){ switch(action.type) { case 'USER_FETCH_DATA_SUCCESS': return action.users; default: return state; }

}

I do not understand why this error gets out, without redux-thunk everything worked well, very grateful for the answer!

    1 answer 1

    const imgs = this.prop.users.map((user, index) => {

    Typo this.props . Be careful and remove the question, as it does not carry value for the community :)