javascript - react : How to display error on incorrect user login

Question

我是 React 的初学者，正在实现一个函数，在渲染方法中单击按钮，我会转到函数 foo。在该函数中，我将用户名和密码发送到服务器。

如果用户名和密码正确，则返回一个 JSON 对象，如

{"Result":1,"Cookie":"COOKIE!!!"}

现在，如果结果为 0，我想打印一条错误消息，说明用户名和密码无效，如果正确，我想将其重定向到不同的组件类。有人可以帮帮我吗？

我已经尝试阅读很多帖子，但无法做到。问题是，我想在网页上打印一些东西，但这只能在渲染中完成。当我得到 cookie 时，我在一个函数 foo 中，所以我不知道如何打印错误消息。

我也不知道如何在成功验证后将其带到新页面，即 cookie 将为 1

import React from 'react';
import './style.scss';
import LoginImage from './LoginImage.png'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
//import Logfailed from './Logfailed'
import Flood from './Flood'

class UserLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userName:'', password:'', act:'l', flag:0};
    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

   async handleClick(e) {
    const url = 'http://52.8.557.164/user'
    const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
    try {
        const response = await fetch(url, 
        {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            },
        });
        const json = await response.json();
      if(json['Result'] === 1) {
        this.state.flag=1; 
      }
      else {
        this.state.flag=2;
      }
        console.log('Success', JSON.stringify(json));
      console.log(json['Cookie']);
    } catch (error) {
        console.error('Error', error);
    }

 }

 handleChange1(e) {
  this.setState({userName: e.target.value})
 }
 handleChange2(e) {
  this.setState({password: e.target.value})
 }


render() {
  const err = this.state.flag;
    return (
        <div className = 'outer-container' ref={this.props.containerRef}> 
            <div className = 'header'> Login </div>
            <div className="content">
      <div className="image">
              <img src={LoginImage} />
      </div>

            <Form className = 'form'>
        <Form.Group controlId="formBasicEmail" className = 'form-group'>
          <Form.Label style={{marginTop: '90px'}}>Username</Form.Label>
          <Form.Text className="text-muted" htmlFor="username"></Form.Text>
          <input type="text" value = {this.state.userName} name="username" placeholder="username" onChange={this.handleChange1}/>
        </Form.Group>
        <Form.Group controlId="formBasicPassword" className = 'form-group'>
        <Form.Label>Password</Form.Label>
        <Form.Text className="text-muted" htmlFor="password"></Form.Text>
          <input type="password" value = {this.state.password}  name="password" placeholder="password" onChange={this.handleChange2} />
        </Form.Group>
        </Form>
            </div>
            <div className="footer">
                <Button variant="outline-primary" size="lg" onClick={this.handleClick} className="btn" block>
                    Login
                </Button>
            </div>
         </div>
    );
}   
}

export default UserLogin;

Answer 1

首先，在您的 handleClick() 方法中，您尝试直接修改组件的状态，而不是使用 React 的内置 setState() 方法。这将阻止您的 UI 对更新使用react，因为 React 无法知道您的组件的状态已更改。

if(json['Result'] === 1) {
    this.state.flag=1; 
} else {
    this.state.flag=2;
}

相反，如果您将该代码替换为:

if(json['Result'] === 1) {
    this.setState({flag: 1}); 
} else {
    this.setState({flag: 2}); 
}

然后这将导致您的组件在每次状态更改时重新渲染，因此您的应用程序将变为响应式(Reactive)。

接下来，如果您想在 flag 属性等于 2 时向用户显示警告消息，只需在 JSX 中添加一个条件表达式。

{ this.state.flag === 2 && <p>Your login credentials could not be verified, please try again.</p>}

这意味着 <p>仅当表达式的第一部分，即 this.state.flag === 2 时，才会评估(因此呈现)标记, 评估为真。

如果您想在成功登录后将用户重定向到另一个路由，只需导入 Redirect来自 react-router-dom 的组件并将您的 render() 方法中的 return 语句替换为以下内容:

if (this.state.flag === 1) {
    return <Redirect to='/route' />
}

// else
return (
    <div className = 'outer-container' ref={this.props.containerRef}>
    // ... add the rest of your JSX
)

有关此解决方案的更多信息，请参阅 this link .

所以最终，您的 render() 方法可能如下所示:

render() {
    if (this.state.flag === 1) {
        return <Redirect to='/route' />
    }

    // else
    return (
        <div className = 'outer-container' ref={this.props.containerRef}>
            <div className = 'header'> Login </div>
            <div className="content">
                <div className="image">
                    <img src={LoginImage} />
                </div>
                { this.state.flag === 2 && <p>Your login credentials could not be verified, please try again.</p>}
                // ... add the rest of your JSX
    )
}

~~~ 更新~~~

如果 <Redirect>方法不起作用，我们也可以尝试另一种方法(也详细 here )。假设我们从 API 返回正确的标志，我们可以在您的获取请求解决后以编程方式重定向用户。所以你可以试试:

if(json['Result'] === 1) {
    this.setState({ flag: 1 }); 
    this.props.history.push('/route')
}

但是，为了使用这种方法，您还需要使用 withRouter 包装您的组件。 HOF 在您的导出声明中。所以而不是:

export default MyComponent

你需要做:

export default withRouter(MyComponent)

只要确保导入 withRouter来自 react-router-dom .

如果您采用这种方法，您将不再需要此代码块:

if (this.state.flag === 1) {
    return <Redirect to='/route' />
}