未捕获错误：对象作为 React 子对象无效（发现：[object Promise]）

Question

未捕获错误：对象作为 React 子对象无效（发现：[object Promise]）。

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

async function Login() {
const [username,setUsername] = useState("")
const [password,setPassword] = useState("")


async function handleSubmit({event) {
event.preventDefault
 fetch("http://localhost:3001/api/login",{
  method:"post",
  headers:{
    "Content-Type" : "application/json"
  },
  body:JSON.stringify({username:username,password:password})
})
const data = await response.json()
console.log(data.username)

} 



  return (
    <div className="App">
      <form onSubmit={handleSubmit}>

        <input placeholder="username" value={username} onChange={ e => setUsername(e.target.value)} />
        <input placeholder="password " value={password} onChange={ e => setPassword(e.target.value)}/>
        <button  type='submit' >Submit</button>
      </form>
    </div>
  );
}

export default Login;

Answer 1

你忘记在调用方法之前放置等待

async function handleSubmit(event) {
event.preventDefault()
 let response = await fetch("http://localhost:3001/api/login",{
  method:"post",
  headers:{
    "Content-Type" : "application/json"
  },
  body:JSON.stringify({username:username,password:password})
})
const data = await response.data
console.log(data.username)

}