Question

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

我的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导入了我的“登录”页面，因此我当前拥有默认消息

Answer 1

无论您在代码中有<DismissableAlert />的什么地方，您都需要通过道具以某种方式传递失败登录的结果，我认为这将是/login或类似的地方。我的猜测是通过通过navigate提供的'state'选项传递错误来做类似的事情：

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中有一条默认消息，因此这只是一个示例，表明您可以传递错误以使用它来显示相关消息。

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

1 个答案: