2

我正在学习React，我购买了一个管理模板，我正在尝试修改登录对话框以在不同的条件下显示不同的警报，因此我定义了一个组件，该组件接收一个调用alertType来配置警报的显示属性的 props。

警报取决于 ajax 的结果，因此由于它的异步性质，我正在向执行 ajax 的方法发送一个处理程序函数。Login2此处理函数根据请求的结果更改其 React 组件 () 的状态，以便组件重新渲染并相应地显示带有新状态的警报。

我遇到的问题是当处理程序方法尝试更改其组件的状态时出现以下错误：

TypeError: Cannot add property updater, object is not extensible

在此处输入图像描述

这是处理函数 ( handleLoginAttempt()) 被声明 ( login2.js) 的代码：

import React from 'react';
import Cookies from 'js-cookie';
import {Link} from 'react-router-dom'
import TextField from '@material-ui/core/TextField';
import Checkbox from '@material-ui/core/Checkbox';
import Button from '@material-ui/core/Button';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import IntlMessages from 'util/IntlMessages';
import {UncontrolledAlert} from 'reactstrap';
import {ALERT_INFO, ALERT_ERROR, ALERT_WARNING} from 'attractora/AttrAlert';
import AttrAlert from 'attractora/AttrAlert';
import logIn from 'controllers/auth';

class Login2 extends React.Component {
  constructor() {
    super();

    this.state = {
      name: '',
      username: '',
      password: '',
      alert: null,
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleLoginAttempt = this.handleLoginAttempt.bind(this);
    this.isAlert = this.isAlert.bind(this);
  }

  isAlert() {
    if(this.state.alert !== null) {
      return (
        <AttrAlert alertType={this.state.alert.type}>{this.state.alert.text}</AttrAlert>
      );
    } else {
      return null;
    };
  }

  handleClick() {
    const logInAttempt = logIn(this.state.username, this.state.password, this.handleLoginAttempt);
  }

  handleLoginAttempt(result) {
    if(result.isSuccess) {
      Cookies.set('token', result.token);
      Cookies.set('username', result.username);
      this.setState({alert: null});
    } else {
      Cookies.remove('token');
      Cookies.remove('username');
      this.setState({alert: {type: ALERT_ERROR, text: "Usuario o password inválido."}});
    }
  }

  render() {
    const {
      username,
      password
    } = this.state;

    return (
      <div
        className="login-container d-flex justify-content-center align-items-center animated slideInUpTiny animation-duration-3">
        <div className="login-content">
          <div className="login-header mb-4">
            <Link className="app-logo" to="/" title="Jambo">
              <img src={require("assets/images/logo-color.png")} alt="jambo" title="jambo"/>
            </Link>
          </div>
          {this.isAlert()}
          <div className="login-form">
            <form>
              <fieldset>
                <TextField
                  id="username"
                  label="Usuario"
                  fullWidth
                  onChange={(event) => this.setState({username: event.target.value})}
                  defaultValue={username}
                  margin="normal"
                  className="mt-1"
                />
                <TextField
                  type="password"
                  id="password1"
                  label="Password"
                  fullWidth
                  onChange={(event) => this.setState({password: event.target.value})}
                  defaultValue={password}
                  margin="normal"
                  className="mt-1"
                />
                <div className="mt-1 mb-2 d-flex justify-content-between align-items-center">
                  <FormControlLabel
                    control={
                      <Checkbox color="primary"
                                value="gilad"
                      />
                    }
                    label={<IntlMessages id="appModule.rememberMe"/>}
                  />

                  <div>
                    <Link to="/app/app-module/forgot-password-2"
                          title="Reset Password"><IntlMessages
                      id="appModule.forgotPassword"/></Link>
                  </div>
                </div>

                <Button onClick={this.handleClick} color="primary" variant="contained" className="text-white">
                  <IntlMessages id="appModule.signIn"/>
                </Button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login2;

这是调用de处理函数的代码（auth.js）：

import apiServer from 'controllers/settings';
import axios from 'axios';

const logIn = (username, password, handler) => {
  axios.post(apiServer+"token_auth/", {
    username: username,
    password: password
  })
  .then(function (Response) {
    handler({isSuccess: true, token: Response.data.token, username: username});
  })
  .catch(function (Error) {
    handler({isSuccess: false, error: Error});
  });
}

export default logIn;

我对React很陌生，所以我会很感激任何帮助。

4

0 回答 0