绑定 this 后 setState 不是函数 [英] setState not a function after binding this

问题描述

我有一个简单的表单，允许用户创建纯文本帖子.下面的代码在 createPostRequest 调用之后生成一个成功的服务器端响应.但是，在成功发布后，我想更新状态以清空 postBody 字段并更新 UI 以反映此更改，然后允许用户发出后续请求以发布其他消息.

目前，一切都只适用于第一个请求，并且在成功的初始请求之后，postBody 字段不会清空，并且在第一个初始请求之后尝试更改 post 字段的值时，每次击键都是导致以下错误:

未捕获的类型错误:无法读取未定义的属性setState"

请注意，有点奇怪的是，尽管将 this 绑定到构造函数中的 onChange 方法，但我还是收到了上述错误.

有人遇到过这个问题吗?我感谢有关如何解决的任何建议.

构造函数(道具){超级(道具)；this.state = {帖子正文:"，地点:主要"};this.onSubmit = this.onSubmit.bind(this);this.onChange = this.onChange.bind(this);}onChange(e) {this.setState({[e.target.name] : e.target.value});}onSubmit(e) {e.preventDefault();this.props.createPostRequest(this.state).then(() =>{this.setState = ({帖子正文:"});})}使成为() {返回 (<div className="create-post-inner col-md-12"><form id="createPost" onSubmit={ this.onSubmit } ><textarea value={this.state.postBody} className="form-control postInput" name="postBody" onChange={ this.onChange } ></textarea><span>状态的值是{this.state.postBody}</span><input type="submit" className="submit btn btn-primary"/></表单>

);}

解决方案

在 this.setState 之后有一个额外的 = .将以下内容更改为

 this.props.createPostRequest(this.state).then(() =>{this.setState({帖子正文:"});})

I have a simple form allowing users to create a plain text post. The code below generates a successful server side response following the createPostRequest call. However, following a successful post, I would like to update the state to empty out the postBody field and update the UI to reflect this change, and then allow users to make subsequent requests to post additional messages.

Currently, everything works well for the first request only, and after a successful initial request, the postBody field isn't emptying out and when attempting to change the value of the post field following the first initial request, every key stroke is resulting in the following error:

Uncaught TypeError: Cannot read property 'setState' of undefined

Note, what is a bit odd, is that I am getting the above error despite binding this to the onChange method in the constructor.

Did anyone run into this issue? I appreciate any suggestions on how to resolve.

constructor(props) {
        super(props);

        this.state = {
            postBody : "",
            location: "main"
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }

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

    onSubmit(e) {
        e.preventDefault();

        this.props.createPostRequest(this.state).then(
            () => {

                this.setState = ({
                    postBody : ""
                });
            }
        )
    }

    render() {

        return (
            <div className="create-post-inner col-md-12">
                <form id="createPost" onSubmit={ this.onSubmit } >
                    <textarea value={this.state.postBody} className="form-control postInput" name="postBody" onChange={ this.onChange } >
                    </textarea>
                    <span>The value of the state is {this.state.postBody}</span>
                    <input type="submit" className="submit btn btn-primary" />
                </form>
            </div>
        );
    }

解决方案

there is an extra = after this.setState . Change the following to

 this.props.createPostRequest(this.state).then(
        () => {

            this.setState({
                postBody : ""
            });
        }
    )

这篇关于绑定 this 后 setState 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！