Question

我正在从事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;

这是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>
    )
}

这是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>
        );
}
}
`````

Answer 1

您的大小写错误。

更改此：

DocumentRoot "/home/me/search.bin"

对此：

const [customerSignUp, setCustomerSignUp] = ...

请注意const [customerSignup, setCustomerSignUp] = ...和Signup之间的拼写差异。还要在代码中的其他地方进行更改。

在做出反应时为什么会这样显示错误->未定义'customerSignup'

1 个答案: