Question

我遇到了问题，

未处理的拒绝（错误）：无效的挂接调用。

显然，这违反了“请勿在事件处理程序中调用”的规则。？我找不到替代方法来更新我的上下文。我需要上下文来更新 menu.js 等几个组件，以管理对私有路由的可访问性...

我的 AuthContext.js

export const AuthContext = React.createContext({
    token: localStorage.getItem('token') || '',
    setToken: () => {}
});

我的 LoginForm.js

class LoginForm extends Component {
  authContext = useContext(AuthContext);

  constructor() {
    super();
    this.state = {
      email: 'eve.holt@reqres.in',
      password: 'cityslicka',
      error: ''
    };

    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(evt) {
    evt.preventDefault();
    axios({
      method: 'POST',
      url: 'https://reqres.in/api/login',
      data: {
        email: this.state.email,
        password: this.state.password
      }
    }).then(result => {
      if (result.status === 200) {
        this.authContext.setToken(result.data.token);
        localStorage.setItem('token', result.data.token);
      } else { }
    });
  }

 ...
}

我找到了一些答案，但我听不懂或无法解决我的问题。如果您能解释您的答案，我将不胜感激

感谢您的帮助

Answer 1

您需要将经典组件重写为功能组件，因为挂钩并非旨在在类内部工作。查阅react doc的hooks规则： https://reactjs.org/docs/hooks-effect.html

根据axios响应更新上下文

1 个答案: