Question

在运行我的应用程序时，当尝试使用某些表单值更新状态时，出现以下错误消息：
“未捕获的TypeError：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 | }

在构造函数中向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;

ReactJS：未捕获的TypeError：this.setState不是一个函数

1 个答案: