Javascript React无法添加属性更新程序，对象不可扩展

我正在学习React，我购买了一个管理模板，并试图修改登录对话框以在不同条件下显示不同的警报，因此我定义了一个组件，该组件接收名为

alertType

的道具，以配置警报的显示属性

警报取决于ajax的结果，因此由于它的异步性质，我将向执行ajax的方法发送一个处理函数。此处理程序函数会根据请求的结果更改其React组件（

Login2

）的状态，以便组件使用新状态相应地重新呈现和显示警报

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

TypeError: Cannot add property updater, object is not extensible

这是声明处理程序函数（

handleLoginAttest（）

）的代码（

login2.js

）：

---

我对React非常陌生，因此我将非常感谢您的帮助。

请您在React沙盒中添加示例，因为我这边的所有操作都很好？

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;

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;