Question

我正在尝试使用this.setState（）命令在PostData函数中使用字符串值设置状态“错误”，如下所示，但是在调试时我看到'this'是未定义的，因此setState没有将字符串分配给state中的错误变量。它与this一样，失去了Postdata函数内部的作用域。

我在StackOverflow上也看到了类似的问题，其中通过应用setState正确绑定功能来解决该问题，因为绑定功能注册不是我的情况。

class Signup extends Component {

    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: '',
            confirmPassword: '',
            email: '',
            name: '',
            error: '',
            redirectToReferrer: false
        };

        this.signup = this.signup.bind(this)
        this.onChange = this.onChange.bind(this)
    }


    signup() {
        PostData('signup', this.state).then((result) => {
            let responseJson = result
            console.log(responseJson.message)
            if (responseJson.message.indexOf("registration success") > -1) {
                sessionStorage.setItem('userData', JSON.stringify(responseJson))
                this.setState({ redirectToReferrer: true });
            } else {
                let string = responseJson.message[0]
                this.setState({ error: string })
            }

        });
    }


    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }

    render() {
        if (this.state.redirectToReferrer || sessionStorage.getItem('userData')) {
            return (<Redirect to={'/home'} />)
        }



        return (

            <div className="row " id="Body">
                <div className="medium-5 columns left">
                    <h4>Signup</h4>
                    <label>Email</label>
                    <input type="text" name="email" placeholder="Email" onChange={this.onChange} />
                    <label>Name</label>
                    <input type="text" name="name" placeholder="Name" onChange={this.onChange} />
                    <label>Username</label>
                    <input type="text" name="username" placeholder="Username" onChange={this.onChange} />
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Password" onChange={this.onChange} />
                    <label>Confirm Password</label>
                    <input type="password" name="confirmPassword" placeholder="Confirm Password" onChange={this.onChange} />

                    <input type="submit" className="button" value="Sign Up" onClick={this.signup} />
                    <a href="/login">Login</a>
                    <input name="error" onChange={this.onChange}></input>
                </div>

            </div>
        );
    }
}

export default Signup

Answer 1

这可能与您的功能范围有关。您的this.setState用另一个箭头功能包装。您可以将setState包装在另一个函数中，但放在该类的顶层。

您可以尝试为onClick事件添加箭头功能吗？

反应-无法读取未定义的属性'setState'

1 个答案: