时间戳

首页 > 解决方案 > 如何在我的登录页面上传递我的错误消息

reactjs - 如何在我的登录页面上传递我的错误消息

问题描述

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

我的警报.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 导入了我的登录页面，所以我目前有默认消息

标签： reactjspassport.jsgatsby

解决方案

无论您的代码中有什么，您都需要以某种方式通过道具传递登录失败的结果，<DismissableAlert />我假设它会是/login或类似的。我的猜测是通过“状态”选项传递错误来做这样的事情，该选项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组件（或任何它被称为）中，您应该可以访问错误的结果作为道具，然后您可以将其传递给警报：

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

或者类似的东西，取决于你的组件。我注意到您在 DismissableAlert 中有一条默认消息，因此这只是一个示例，表明您可以传递错误以使用它来显示相关消息。

推荐阅读