如果密碼與數據庫中的密碼不匹配，如何顯示？

Question

我是反應和節點的新手，當密碼/電子郵件與 Mongo 數據庫中的密碼/電子郵件不同時，我找不到顯示方法。

此外，當我輸入錯誤的憑據時，它會給我這個錯誤：TypeError: Cannot read properties of null (reading 'email')

我該如何解決？

這是主頁

import React from 'react'
import { useState } from 'react'
import {useNavigate} from 'react-router-dom'
const axios = require('axios')


const Home = () => {

let navigate = useNavigate()
const [isRegistered, setIsRegistered] = useState(false)
const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: ""
})

// save the data of each input in the state
const handleChange = (e) => {
  setFormData({
    ...formData,
    [e.target.name]: e.target.value
  })
}

//on submit, send the data to the server with axios
const handleSubmit = (e) => {
  e.preventDefault()
  axios.post(`http://localhost:8000/${isRegistered ? "signup" : "login"}` , {formData})
  .then((res) => {
    const success = res.status === 200
    if (success && isRegistered){
       navigate('/onboarding')
     } 
    if (success && !isRegistered) {
      navigate ('/dashboard')
      console.log(res)
    } else {
      console.log("password is wrong")
    }
  })
  .catch(err => console.log(err))
}

  return (
    <div className='home'>
        <form onSubmit={handleSubmit}>
            {isRegistered &&<input onChange={handleChange} type="text" name='name' placeholder='name' required/>}
            <input onChange={handleChange} type="email" name="email" placeholder='email' required/>                
            <input onChange={handleChange} type="password" name='password' placeholder='password' required/>
            <input type="submit"/>
        </form>
    </div>
  )
}

export default Home

這是服務器：

const express = require('express')
const app = express()
const cors = require('cors')
var MongoClient = require('mongodb').MongoClient;
var url = "AAA"

app.use(cors())
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())


app.post('/signup', function (req, res) {
    let data = req.body.formData
    res.send("success")

    MongoClient.connect(url, (err, db) =>{
        if (err) throw err;
        const database = db.db("data");
        database.collection("utenti").insertOne(data, function(err, res) {
            if(err) throw err;
            console.log(res)
            db.close()
        });
    });
})

app.post('/login', async (req, res) => {
    const client = new MongoClient(url)
    const data = req.body.formData
    

    try{
        await client.connect()
        const database = client.db("data")
        const collection = database.collection("utenti")   
    
        const result = await collection.findOne({email: data.email, password: data.password})

        if (result.email && result.password){
            res.status(200).send("Success")
        } else {
            res.status(400).send("Invalid credentials")
        }

    } catch(err){console.log(err)}
})

app.listen(8000)

Answer 1

對於“TypeError”，像這樣在 axios 請求中正確發送 JSON 數據

axios.post(`http://localhost:8000/${isRegistered ? "signup" : "login"}` , {
formData: formData
})