0

Переписывал приложение под redux-thunk, простое приложение которое берет данные с сайта randomuser.me, вся проблема в получении данных, приходят они таким образом

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

но функция map все равно не принимает их и выводит ошибку

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

код с функцией map

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>
    )
}

код экшена который берет данные из интернета

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)));
}

}

код куда это все передается

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

}

далее все идет в редьюсер

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

}

Не понимаю почему вылазит данная ошибка, без redux-thunk все работало хорошо, очень благодарен за ответ!

1 ответ 1

1

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

Опечатка this.props. Будьте внимательнее и удалите вопрос, так как он не несёт ценности для сообщества :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.