@nano_e_t_4

Как вернуть результат выполнения пост запроса?

Всем привет
Изучаю реакт, пишу небольшое приложение. Столкнулся с такой проблемой:
при авторизации отправляю пост запрос через axio на бэкенд. Бэкенд отвечат 200 и даже отдает профиль (потому сразу после вызова функции ставить вывод в консоль и профиль приходит) но на фронтенте это нигде не отображается\не сохраняется. То есть не совсем понимаю, как правильно вернуть резлуьтат апи функции в комоненет

Код отображения элемента:

function Login(props) {
    return (
        <div className="Login">
            <form onSubmit={props.args.handleSubmit}>
                <FormGroup controlId="email" bsSize="large">
                    <ControlLabel>Email</ControlLabel>
                    <FormControl
                        autoFocus
                        value={props.args.state.email}
                        onChange={props.args.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={props.args.state.password}
                        onChange={props.args.handleChange}
                        type="password"
                    />
                </FormGroup>
                <Button
                    block
                    bsSize="large"
                    disabled={!props.args.validateForm()}
                    type="submit"
                >
                    Login
                </Button>
            </form>
        </div>
    );
}
export default Login


Код логики компонента:

export default class LoginContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: "",
            password: ""
        };
    }
    validateForm() {
        return this.state.email.length > 0 && this.state.password.length > 0;
    }
    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }
    handleSubmit = event => {
        checkCredentials({"email":this.state.email, "password": this.state.password}, this)
        event.preventDefault();
    }
    render() {
        return (
            <Login args={this}/>
        );
    }
}

Код функции checkCredentials:
export function checkCredentials(credentials) {
    const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(credentials),
        url: 'http://localhost/api/login',
        withCredentials: true
    };
    axios(options)
        .then(res => {
            store.dispatch(getProfileSuccess(res.data));
            return res
        })
}


В редаксе данных по профилю тоже нет (

Подскажите пожалуйста куда посмотреть
  • Вопрос задан
  • 190 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы