javascript - ReactJS:未捕获的类型错误:this.setState 不是一个函数

Question

在运行我的应用程序时，当尝试使用某些表单值更新状态时，出现以下错误消息:
“未捕获的类型错误:this.setState 不是一个函数”

LoginForm.onChange
src/components/forms/LoginForm.js:21
  18 | }
  19 | 
  20 | onChange = e => {
> 21 |     this.setState({
     | ^  22 |         data: { ...this.state.data, [e.target.name]: e.target.value }
  23 |     });
  24 | }

在构造函数中添加绑定(bind)到 onChange(之前没有)，但这并没有解决问题。this.onChange = this.onChange.bind(this);

我正在使用: react :“^16.8.6”

这是组件代码:

import React from "react";
import { Form, Button } from "semantic-ui-react";
import Validator from "validator";
import InlineError from "../messages/InlineError"

class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                email: "",
                password: ""
            },
            loading: false,
            errors: {}
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange = e => {
        this.setState({
            data: { ...this.state.data, [e.target.name]: e.target.value }
        });
    }

    onSubmit = () => {
        const errors = this.validate(this.state.data);
        this.setState = ({ errors });
    };

    validate = (data) => {
        const errors = {};
        if (!Validator.isEmail(data.email)) errors.email = "Invalid email."
        if (!data.password) errors.password = "Cannot be blank.";

        return errors;
    };

    render() {
        const { data, errors } = this.state;
        return (
            <Form onSubmit={this.onSubmit}>
                <Form.Field>
                    <label htmlFor="email">Email</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="me@example.com"
                        value={data.email}
                        onChange={this.onChange}
                    />

                </Form.Field>
                {errors.email && <InlineError text={errors.email} />}
                <Form.Field>
                    <label htmlFor="password">Password</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Enter your password"
                        value={data.password}
                        onChange={this.onChange}
                    />
                    {errors.password && <InlineError text={errors.password} />}

                </Form.Field>

                <Button primary>Login</Button>
            </Form>
        );
    }
}


export default LoginForm;

Answer 1

除了 onChange 处理程序很小之外，代码的一切都是正确的 修改您的 onChange 处理程序

onChange = e => {
  const target = e.target;
  const name = target.name;
  this.setState({
     ...this.state,
     data: {
        ...this.state.data,
        [name]: target.value
     }
  });
 };

---

抱歉我忽略了onSubmit 应该是这样的

 onSubmit = () => {
  const errors = this.validate(this.state.data);
  this.setState({ errors });
};

这应该有效!!

确保组件看起来像这样

import React from "react";
import { Form, Button } from "semantic-ui-react";
import Validator from "validator";
import InlineError from "../messages/InlineError";

class LoginForm extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: {
            email: "",
            password: ""
         },
         loading: false,
         errors: {}
      };
   }

   onChange = e => {
      const target = e.target;
      const name = target.name;
      this.setState({
         ...this.state,
         data: {
            ...this.state.data,
            [name]: target.value
         }
      });
   };

   onSubmit = () => {
      const errors = this.validate(this.state.data);
      this.setState({ errors });
   };

   validate = data => {
      const errors = {};
      if (!Validator.isEmail(data.email)) errors.email = "Invalid email.";
      if (!data.password) errors.password = "Cannot be blank.";

      return errors;
   };

   render() {
      const { data, errors } = this.state;
      return (
         <Form onSubmit={this.onSubmit}>
            <Form.Field>
               <label htmlFor="email">Email</label>
               <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="me@example.com"
                  value={data.email}
                  onChange={this.onChange}
               />
            </Form.Field>
            {errors.email && <InlineError text={errors.email} />}
            <Form.Field>
               <label htmlFor="password">Password</label>
               <input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="Enter your password"
                  value={data.password}
                  onChange={this.onChange}
               />
               {errors.password && <InlineError text={errors.password} />}
            </Form.Field>

            <Button primary>Login</Button>
         </Form>
      );
   }
}

export default LoginForm;