简体   繁体   中英

React:TypeError: this.setstate is not a function

I am experiencing issues with the TypeError: this.setstate is not a function. I am Using react to create an app that has a sign in and a register page, both pages have email, name and password input fields the error happens immediately on input of the values in the fields. below is the sample of my code from signin page, how can I get through this issue I have tried all my best and it seems I cant figure it out what is wrong in my code since is compiled successfully without any other errors expect on the inputs. I am also not so good at coding I am currently learning.

`import React from 'react';

class Signin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            signInEmali: '',
            signInPassword: '',
        };
    }

    onEmaliChange = (Event) => {
        this.setstate({ signInEmali: Event.target.value });//the error happens here
    };

    onPasswordChange = (Event) => {
        this.setstate({ signInPassword: Event.target.value });//the error happens here
    };
    onSubmitSignIn = () => {
        fetch('http://localhost:3001/signin', {
            method: 'post',
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify({
                email: this.state.signInEmali,
                password: this.state.signInPassword,
            }),
        })
            .then((Response) => Response.json())
            .then((data) => {
                if (data === 'success') {
                    this.props.onRouteChange('home');
                }
            });
    };
render() {
        const { onRouteChange } = this.props;
        return (
            <article className="br3  b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
                <main className="pa4 black-80">
                    <div className="measure">
                        <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
                            <legend className="f1 fw6 ph0 mh0">Sign In</legend>
                            <div className="mt3">
                                <label className="db fw6 lh-copy f6" htmlFor="email-address">
                                    Email
                                </label>
                                <input
                                    className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                                    type="email"
                                    name="email-address"
                                    id="email-address"
                                    onChange={this.onEmaliChange}
                                />
                            </div>
                            <div className="mv3">
                                <label className="db fw6 lh-copy f6" htmlFor="password">
                                    Password
                                </label>
                                <input
                                    className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                                    type="password"
                                    name="password"
                                    id="password"
                                    onChange={this.onPasswordChange}
                                />
                            </div>
                        </fieldset>
                        <div className="">
                            <input
                                onClick={this.onSubmitSignIn}
                                className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
                                type="submit"
                                value="Sign in"
                            />
                        </div>
                        <div className="lh-copy mt3">
                            <p
                                onClick={() => onRouteChange('register')}
                                className="f6 link dim black db pointer">
                                Register
                            </p>
                        </div>
                    </div>
                </main>
            </article>
        );
    }
}

export default Signin;

`

Just change setstate to setState in your code and it'll work fine

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM