Как передать мои сообщения об ошибках на моей странице входа - PullRequest
Новая
       12

Как передать мои сообщения об ошибках на моей странице входа

0 голосов
/ 03 июля 2019

У меня есть функция handleLogin в файле auth.js, я хотел бы получить ошибки, полученные в .catch, и передать их в мой файл Alert.js, чтобы отобразить ошибки в предупреждении в Login.js ...

Это моя handleLogin функция на auth.js

export const handleLogin = async ({ email, password }) => {
const user = await ooth.authenticate('local', 'login', {
    username: email,
    password: password,
}).catch(e => { 
    alert(e.message)
 });
await navigate(`/app/profile`);
if (user) {
    return setUser({
        id: user._id,
        username: `jovaan`,
        name: `Jovan`,
        email: user.local.email,
        avatar: `3`,
        telephone: `0788962157`,
        bio: `I'm a front-end dev`
    })
}
return false
}

My Alert.js 

import React from "react";
import { Alert } from "shards-react";

export default class DismissibleAlert extends React.Component {
  constructor(props) {
    super(props);
    this.dismiss = this.dismiss.bind(this);
    this.state = { visible: true, message: "Message par défaut" };

  }

  render() {
    return (
      <Alert dismissible={this.dismiss} open={this.state.visible} theme="success">
        {this.message()}
      </Alert>
    );
  }

  dismiss() {
    this.setState({ visible: false });
  }

  message() {
      return this.state.message
  }
}

Я импортировал свой Alert.js вмоя страница входа, поэтому у меня в настоящее время есть сообщение по умолчанию

1 Ответ

0 голосов
/ 03 июля 2019

Вам нужно будет каким-то образом передавать результаты неудачного входа в систему через реквизит, где бы в вашем коде не было <DismissableAlert />, которое, как я предполагаю, будет равно /login или подобному.Я предполагаю сделать что-то вроде этого, передав ошибку через опцию 'state', которую navigate предоставляет: 

const error = null;
const user = await ooth.authenticate('local', 'login', {
  username: email,
  password: password,
}).catch(e => { 
  error = e
  console.err(e.message)
});

if(error) {
  await navigate(`/login`, {
    state: { error: error }, 
  });
}

Затем в вашем LoginPage компоненте (или как он там называется),После этого у вас должен быть доступ к результату ошибки в качестве реквизита, который вы затем можете передать в Alert: 

render() {
  const {error} = this.props
  return(
    <div>
      <LoginForm />
      {error &&
        <DismissibleAlert message={error.message} />
      }
    </div>
  )
}

или что-то в том же духе, в зависимости от ваших компонентов.Я заметил, что у вас есть сообщение по умолчанию в DismissableAlert, так что это всего лишь пример, показывающий, что вы можете передать ошибку, чтобы использовать ее для отображения соответствующего сообщения.

...