反应：TypeError：无法读取未定义的属性“setState”

Posted 2023-02-22

【中文标题】反应：TypeError：无法读取未定义的属性“setState”

【英文标题】：React: TypeError: Cannot read property 'setState' of undefined

【发布时间】：2017-01-01 12:19:35

【问题描述】：

我是 React 的菜鸟，正在尝试创建登录表单。当用户输入正确的登录信息时，rest api 将返回 JWT 令牌。但是我找不到如何将状态“令牌”设置为响应的值。我仍然可以将 response.token 保存到 localstorage 并正确显示。我认为“this”指向错误的功能，但我怎么能在不破坏逻辑的情况下解决这个问题？有什么提示吗？谢谢

登录.js

import React from 'react';

import axios from 'axios';

import Glyphicon from 'react-bootstrap/lib/Glyphicon';

import MyInput from './../components/Input';

import  connect  from "react-redux";

import  Form  from 'formsy-react';

var server = "http://localhost:3000";

class Login extends React.Component 
    constructor(props) 
        super(props)
        this.state = 
            canSubmit: false,
            token: null
        ;
        this.enableButton = this.enableButton.bind(this);
        this.disableButton = this.disableButton.bind(this);
        this.submit = this.submit.bind(this);
    

    submit(data) 
        axios.post(server + '/login', 
            username: data.username,
            password: data.password
        )
            .then(function (response) 
                if (response.data.token) 
                    var token = response.data.token;
                    localStorage.setItem("token", token);
                    this.setState( token: token ); //Here is the problem
                    console.log(this.state.token);
                 else 
                    location.reload();
                
            );
    

    enableButton() 
        this.setState( canSubmit: true )
    
    disableButton() 
        this.setState( canSubmit: false )
    

    render() 
        return (
            <div className="loginForm">
                <h2 className="page-header">Login</h2>
                <Form onSubmit=this.submit onValid=this.enableButton onInvalid=this.disableButton>
                    <div className="form-group">
                        <label>Username: </label>
                        <MyInput name="username" validations="isExisty" validationError="Required" required />
                    </div>
                    <div class="form-group">
                        <label>Password: </label>
                        <MyInput type="password" name="password" validations="isExisty" validationError="Required" required />
                    </div>
                    <button
                        type="submit"
                        className="btn btn-primary"
                        disabled=!this.state.canSubmit>
                        Login
                    </button>
                </Form>
                <br/>
                <a href="register">Create user!</a>
                <a id="forgot" href="forgot">Forgot password?</a>

            </div>);
    

export default Login;

【问题讨论】：

在.then回调中this不引用组件，使用箭头函数代替function - .then((response) => ... )。或者设置this回调，.then(function (response) ... .bind(this))

是的，就是这样。非常感谢！

它对我有用。谢谢， - Alexander T.

【参考方案1】：

正如 Alexander 在评论中所说，我必须使用箭头函数 => 或设置 this 进行回调。

【参考方案2】：

您可以使用箭头函数来保留submit 的上下文并能够访问setState：

submit(data) 
    axios.post(server + '/login', 
      username: data.username,
      password: data.password
    )
    .then((response) => 
        if (response.data.token) 
            var token = response.data.token;
            localStorage.setItem("token", token);
            this.setState( token: token );
            console.log(this.state.token);
         else 
            location.reload();
        
    );

【讨论】：

非常感谢您提供十亿美元的答复！你应该努力竞选美国总统！！由于这个愚蠢的修复，我离让我的笔记本电脑着火还有几毫米的距离，先生，你刚刚为我节省了价值 1200 美元的机器！赞一个。

感谢您的帮助。如果你能指出一些解释为什么使用箭头函数保留原始 this 的文档，我会很高兴。谢谢！