未在反应中提交的表单

Question

我正在尝试使用表单在全栈 MERN 应用程序中将信息从客户端发送到服务器端，但表单未提交，代码如下：

    import React, { useState } from 'react'
import axios from 'axios';
export default () => {
    //keep track of what is being typed via useState hook
    const [firstName, setFirstName] = useState(""); 
    const [lastName, setLastName] = useState("");
    //handler when the form is submitted
    const onSubmitHandler = e => {
        //prevent default behavior of the submit
        e.preventDefault();
        //make a post request to create a new person
        axios.post('http://localhost:8000/api/people', {
            firstName,
            lastName
        })
            .then(res=>console.log(res))
            .catch(err=>console.log(err))
    }
    //onChange to update firstName and lastName
    return (
        <form onSubmit={onSubmitHandler}>
            <p>
                <label>First Name</label><br/>
                <input type="text" onChange={(e)=>setFirstName(e.target.value)} value={firstName}/>
            </p>
            <p>
                <label>Last Name</label><br/>
                <input type="text" onChange={(e)=>setLastName(e.target.value)} value={lastName}/>
            </p>
            <input type="submit"/>
        </form>
    )
}

我收到以下错误：

我无法弄清楚问题所在，仔细检查了所有在互联网上搜索的内容 = 没有

请帮忙！

Answer 1

问题似乎是您的 NodeJS 服务器未运行在后台运行。在通过后端发出任何 API 请求时，您应该运行它。

未在反应中提交的表单

form not submitted in react

forms

error-handling

reactjs

mern