为什么我在运行 React 应用程序并单击表单提交时出现此错误

Question

App.js

import React from "react";
import { useState } from "react";
import axios from 'axios'
const App=()=>{
  const [data,Setdata]=useState({name:'',password:''});
  
  const Handler=e=>{Setdata({...data,[e.target.name]:e.target.value})}
  const submitHandler=e=>{
    e.preventDefault();
    axios.post('https://charming-league-352616-default-rtdb.firebaseio.com/register.json',data).then(()=>alert("submittted successfully"))
  


  }
  return(
    <div>
      <center>
      <form onSubmit={submitHandler}>
      <label style={{'color':'red'}}>Name:</label><br/>
      <input type="text" name="name"onChange={Handler}/><br/>
      <label style={{'color':'pink'}}>Passoword</label><br/>
      <input type="password" password="age" onChange={Handler}></input><br/>
      <input type="submit" value="submit"></input>
</form>
</center>
    </div>
  )
}
export default App;

Error

POST https://charming-league-352616-default-rtdb.firebaseio.com/register.json 400 (Bad Request)

Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: ' 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

Answer 1

The REST API of the Firebase Realtime Database expects the body of the request to contain a JSON object, and it seems like your code is not passing that.

I recommend console.log(JSON.stringify(data)) right before the Axios call to see what the data is that you're passing.

See the documentation on writing data with a POST request .

Answer 2

Seems Submit works fine and the problem Detects in your api request

Try check your request in PostMan