React - 无法读取 null ("reading useState") 错误的属性

Question

我正在尝试在 React 中进行一些表单验证，但收到此错误“无法读取 null 的属性（读取“useState”）。

我对 SO 做了一些研究，其他人通过包含一个设置 useState 的 onChange 解决了这个问题，但这并没有解决它。知道为什么会这样吗？会不会是因为它正在尝试加载表单，而值最初是空的？

import React from 'react'
import Form from 'react-bootstrap/Form'
import { Button } from 'react-bootstrap'
import { Container } from 'react-bootstrap'
import { useState } from 'react';


const [form, setForm] = useState({});
const [errors, setErrors] = useState({});  // state is called in handleSubmit function

const setField = (field, value) => {
  setForm({
    ...form,
    [field]: value
  })
  // Check and see if errors exist, and remove them from the error object:
  if (!!errors[field]) setErrors({
    ...errors,
    [field]: value
  })
}

const findFormErrors = () => {
  const { email, password } = form;
  const newErrors = {}
  // email errors
  if (!email || email === "") newErrors.email = "cannot be blank";
  else if (email.length > 40) newErrors.email = "too long";

  if (!password || password === "") newErrors.password = "can't be an empty password";
  else if (password.length < 5) newErrors.password = "password is not long enough";

  return newErrors  // essentially returning the new errors, empty object

}

const handleSubmit = e => {
  e.preventDefault()

  const newErrors = findFormErrors();

  if (Object.keys(newErrors).length > 0) {
    setErrors(newErrors)
  } else {
    alert("thanks for signing up!");
  }
}

const theForm = () => {
  return (
    <Container>
      <Form className="reduceForm">
        <Form.Label className="contact">Contact Me</Form.Label>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email"
            onChange={e => setField('email', e.target.value)}
            isInvalid={!!errors.name} />
          <Form.Control.Feedback type='invalid'>
            {errors.name}
          </Form.Control.Feedback>
        </Form.Group>
        
        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password"
            onChange={e => setField('password', e.target.value)}
            isInvalid={!!errors.name} />
          <Form.Control.Feedback type='invalid'>
            {errors.name}
          </Form.Control.Feedback>
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </Container>
  )
}

export default theForm

Answer 1

 const [form, setForm] = useState({});
    const [errors, setErrors] = useState({});

这些需要在函数内部。

React - 无法读取 null ("reading useState") 错误的属性

React - Cannot read properties of null ("reading useState") error

javascript

forms

reactjs