ReactJS - замена API выборки на axios не работает - PullRequest
Новая
       24

ReactJS - замена API выборки на axios не работает

1 голос
/ 04 ноября 2019

У меня есть блок кода в ReactJS с API-интерфейсом FETCH, который прекрасно работает, но когда я попытался заменить его на AXIOS, он не работает идеально, хотя я проверил документацию.

РАБОЧИЙ КОДAPI FETCH: 

const signup = (user) => {
       return fetch(`${API}/signup`, {
            method: "POST",
            headers: {
                Accept: 'application/json',
                "Content-Type": 'application/json'
            },
            body: JSON.stringify(user)
        })
        .then(response => {
            return response.json();
        })
        .catch(err => {
            console.log(err);
        });
    }

    const clickSubmit = (event) =>{
        event.preventDefault();
        signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

НЕ РАБОТАЕТ ТОГО ЖЕ КОДА, НО С БИБЛИОТЕКОЙ AXIOS: 

import axios from 'axios';

 const signup = (user) => {
       return axios(`${API}/signup`, {
            method: "POST",
            headers: {
                Accept: 'application/json',
                "Content-Type": 'application/json'
            },
            data: JSON.stringify(user)
        })
        .then(response => {
            return response.data;
        })
        .catch(err => {
            console.log(err);
        });
    }

    const clickSubmit = (event) =>{
        event.preventDefault();
        signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

Ошибка, возникающая после написания вышеуказанного кода с библиотекой Axios:

Необработанный отказ (TypeError): невозможно прочитать свойство 'error' из неопределенного

Что не так в коде с аксиосами?

Примечание:

Видимо, я сузил его до того места, куда приходит undefined. 

signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

Здесь, в блоке .then (), «данные» приходят как неопределенные, и я не знаю, почему, как с fetch api, это работаетхорошо.

1 Ответ

0 голосов
/ 04 ноября 2019

Обратитесь к документации Axios, найденной здесь: https://github.com/axios/axios#response-schema

Вам не хватает только 

.then(response => {
    return response.data;
})

вместо: 

.then(response => {
    return response;
})
...