Javascript ReactJS:Uncaught TypeError:this.setState不是函数

运行我的应用程序时，以及尝试使用某些表单值更新状态时，将显示以下错误消息：
“未捕获类型错误：this.setState不是函数”

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

在构造函数中将绑定添加到onChange（以前没有），但这并不能解决问题。 this.onChange=this.onChange.bind（this）

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

以下是组件代码：

从“React”导入React；
从“语义ui反应”导入{Form，Button}；
从“验证器”导入验证器；
从“./消息/INLINERROR”导入INLINERROR
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
电邮：“，
密码：“
},
加载：false，
错误：{}
};
this.onChange=this.onChange.bind（this）；
}
onChange=e=>{
这是我的国家({
数据：{…this.state.data[e.target.name]：e.target.value}
});
}
onSubmit=（）=>{
const errors=this.validate（this.state.data）；
this.setState=（{errors}）；
};
验证=（数据）=>{
常量错误={}；
如果（！Validator.isEmail（data.email））出现错误。email=“无效电子邮件。”
如果（！data.password）errors.password=“不能为空。”；
返回错误；
};
render（）{
const{data，errors}=this.state；
返回(
电子邮件
{errors.email&&}
密码
{errors.password&&}
登录
);
}
}
导出默认登录信息；

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

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 });
};

这应该行得通

确保组件看起来像这样

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;

从“React”导入React；
从“语义ui反应”导入{Form，Button}；
从“验证器”导入验证器；
从“./messages/InlineError”导入InlineError；
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
电邮：“，
密码：“
},
加载：false，
错误：{}
};
}
onChange=e=>{
const target=e.target；
const name=target.name；
这是我的国家({
…这个州，
数据：{
…此.state.data，
[名称]：target.value
}
});
};
onSubmit=（）=>{
const errors=this.validate（this.state.data）；
this.setState（{errors}）；
};
验证=数据=>{
常量错误={}；
如果（！Validator.isEmail（data.email））出错，则返回。email=“无效电子邮件。”；
如果（！data.password）errors.password=“不能为空。”；
返回错误；
};
render（）{
const{data，errors}=this.state；
返回(
电子邮件
{errors.email&&}
密码
{errors.password&&}
登录
);
}
}
导出默认登录信息；

this.onChange=this.onChange.bind（this）

您不需要执行此操作

this.setState=（{errors}）

这将覆盖您的

onSubmit

中的

setState

函数。同意吗@EmileBergeron@EmileBergeron他是对的。我想这是我这边的设计问题。谢谢，这真让我受不了。我可能需要弄清楚如何处理这个问题。我还删除了@DerekPollard建议的行。非常感谢，这并不能解决问题。仍然得到相同的错误。我已经在答案中添加了更新的登录组件供您参考！！