无法读取未定义的属性（读取“from”）

Question

我像往常一样编码。突然间，无缘无故，我收到了这条令人讨厌的消息，而且一直没有消失。我该如何解决它？

我什么也没做，只是在获取中添加了一堆东西。

前端（react.js）：

import { useState } from 'react'
import './App.css'
import { response } from 'express'

function App() {
  const [Password, SetPassword] = useState('')
  const [Username, SetUsername] = useState('')

  const onSubmit = () => {
  fetch('http://localhost:3000', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      Username: Username, // No need to wrap Username in an object
      Password: Password
    })
  })
  .then(response => {
    if (response.status == 200){
      alert('Matched!')
    }
  })
  .catch(error => {
    console.error(response)
    })
  }
  return (
    <>
      <div class='mainDiv  --centered'>

      <input class='UsernameBox --verticallycentered' placeholder='Username/Email/Phone' value={Username} onChange={(e) => SetUsername(e.target.value)}></input>
      

      <input class='PasswordBox --verticallycentered' placeholder='Password' value={Password} onChange={(e) => SetPassword(e.target.value)}></input>
      <h4 className='ErrorThingy'>Passwords can only contain Letters, numbers and symbols</h4>
      <button onClick={onSubmit} className='LoginBtn --centered'> Log in</button>
      </div>
    </>
  )
}

export default App

无论我做什么都无法修复它

Answer 1

您的提取请求无法处理响应状态不是 200 的情况。要解决此问题，您可以添加 else 块来处理其他状态代码并显示适当的警报，还可以修改控制台语句以记录实际错误记录响应对象。

.then(response => {
    if (response.status === 200) {
        alert('Matched!')
    } else {
        alert('Not matched!')
    }
 })
.catch(error => {
    console.error(error)
 })