node.js - 获取类型错误 : Cannot read property 'prototype' of undefined after modifying form

Question

我目前正在使用 node.js、express 和 ReactJs 开发一个应用程序。我也使用 sequelize 作为我的 ORM。我正在处理我的表单，该表单最初将空值发送到我的数据库，从那时起我就被这个错误困住了几天。我在前端 ReactJs 上得到以下信息:
类型错误:无法读取未定义的属性“原型(prototype)”
我知道这个错误非常模糊，发生的原因有很多。对我来说，这是在我处理表单时发生的。我正在使用 useStates设置我的值并使用 axios 处理发布请求。
我在哪里宣布我的状态:

  let [state, setState] = useState({
    leadName: "",
    excellentLead: ""
  });

handleChange(evt)功能:用于根据我的输入处理更改。

  function handleChange(evt) {
    const value = evt.target.value;

    axios({
      method: "post",
      url: "http://localhost:5000/add",
      data: body,
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    setState({
      ...state,
      [evt.target.name]: evt.target.value,
    });

当前形式(我使用 React Bootstrap 进行样式设置。):

            <Form onSubmit={handleChange}>
              <Form.Group controlId="formBasicName">
                <Form.Label>Name</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter Name"
                  name="leadName"
                  value={state.leadName}
                  onChange={handleChange}
                />
              </Form.Group>

              <Form.Group controlId="formBasicFollowUp">
                <Form.Label>
                  Excellent Lead Worth following up(Yes/No/Maybe)
                </Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter Name"
                  name="excellentLead"
                  value={state.excellentLead}
                  onChange={handleChange}
                />
              </Form.Group>
               <Button variant="primary" type="submit">
                Submit
              </Button>
            </Form>

在我的 server.js这是我的发帖路线:

app.post('/add', function(request, response) {
  Information.create({
    Name:req.body.leadName,
    ExcellentLeadWorthFollowingUp:req.body.excellentLead
  }).then(function(Information){
    res.json(Information);
  })
})

我从前端连接到数据库没有任何问题，我的 post 方法用于在按钮单击时发送空值，这不是目标。另外，这个错误破坏了我的整个程序。
任何建议、解释或链接将不胜感激!

Answer 1

既然你已经修复了你的错误，我想让你知道你正在调用 handleChange每次您的输入更改时。这意味着您正在制作 POST每次在输入中键入字符时请求。
更好的方法是仅在提交时发布您的帖子。

import React, { useState } from "react";

const App = () => {
  const [data, setData] = useState({ name: "", age: "" });

  const handleChange = (e, field) => {
    e.preventDefault(); // prevent the default action

    // set your data state
    setData({
      ...data,
      [field]: e.target.value
    });
  };

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

    // axios post data

    console.log(data); // just for showing
  };

  return (
    <div>
      <p>Fill in data</p>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={data.name}
          onChange={(e) => handleChange(e, "name")}
        />
        <input
          type="text"
          value={data.age}
          onChange={(e) => handleChange(e, "age")}
        />
        <button type="submit">SUBMIT</button>
      </form>
    </div>
  );
};

export default App;