Reactjs 在“为什么错误显示为这样”中-->'；客户启动'；没有定义

我正在从事react项目，我正在尝试使用react中的axios库将数据发布到数据库。但是我遇到了这样的错误-->“customerSignup”没有定义。我正在尝试解决此错误，但我没有，因此请帮助解决此错误，并帮助我将数据从前端发送到后端

这是App.js

import React from 'react';
import './App.css';
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';
import Signup from './Pages/Signup/Signup';
import { BrowserRouter as Router,Switch,Route,} from "react-router-dom";


function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
          <Route path= '/signup'><Signup></Signup></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./Components/Navbar/Navbar”导入导航栏；
从“./Pages/Home/Home”导入主页；
从“./Pages/Signup/Signup”导入注册；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，}；
函数App（）{
返回(
);
}
导出默认应用程序；

这是Navbar.js

import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

export default function Navbar() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <nav className="navbar navbar-expand-lg navbar-light bg-light">
                        <a className="navbar-brand" href="#">Navbar</a>
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item active">
                                    <Link className='nav-link' to='/'>Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className='nav-link' to='/signup'>Signup</Link>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

从“React”导入React；
导入“/Navbar.css”；
从'react router dom'导入{Link}；
导出默认函数Navbar（）{
返回(


家


报名


)
}

这是Signup.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './Signup.css';

export default function Signup() {
    const Signup = () => {
        const [customerSignUp, setCustomerSignUp] = useState([
            { email: '', password: '', firstName: '', lastName: ''}
        ]);

        const handleChange = (event) => {
            setCustomerSignUp({...customerSignup, [event.target.name]: event.target.value})
        }

        const handleSubmit = (e) => {
            e.preventDefault()
            axios.post('http://localhost:9000/api/signup', customerSignup)
              .then(function (response) {
                  console.log(response)
              })
              .catch(function (error) {
                  console.log(error)
              }) 
        }


        return (
            <div className="container">
                <form className='white' onSubmit={handleSubmit}>
                    <h5 className="grey-text.text-darken-3">Sign Up With Email</h5>                        
                    <div className="input-field">
                        <label htmlFor="lastName">Last Name</label>
                        <input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
                    </div>
                    <div className="input-field"> 
                        <button className="btn blue darken-3" type="submit">Sign Up</button>
                    </div>
                </form>
            </div>
        );
}
}
`````

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导入“./Signup.css”；
导出默认函数注册（）{
常量注册=（）=>{
const[customerSignUp，setCustomerSignUp]=useState([
{电子邮件：''，密码：''，名字：''，姓氏：'}
]);
常量handleChange=（事件）=>{
setCustomerSignUp（{…customerSignup，[event.target.name]：event.target.value}）
}
常量handleSubmit=（e）=>{
e、 预防默认值（）
轴心柱http://localhost:9000/api/signup，customerSignup）
.然后（功能（响应）{
console.log（响应）
})
.catch（函数（错误）{
console.log（错误）
}) 
}
返回(
用电子邮件注册
姓
注册
);
}
}
`````

您的大写字母错误

更改此项：

const[customerSignUp，setCustomerSignUp]=…

为此：

const[customerSignup，setCustomerSignUp]=…

---

注意

Signup

和

Signup

之间的拼写差异。还可以根据需要在代码的其他地方进行更改。

Hi@Joshua Obritsch现在错误显示如下：注册（…）：渲染时未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。Remove

const Signup=（）=>{

。