I list some room_name from the backend with React.js

What I want to implement is that user can delete room_name when user clicks the trash can icon.

Issue/error message

Request failed with status code 422

It's strange As shown in the picture, I can see "the body sent to server section" on the console.

I can confirm that the room_name has been sent properly. I believe the data you are sending is correct.

Even if I try with Postman with the same URL and data, I can delete it successfully.

const SettingGetRoomName = () => {

  const [room_name, setRoomName] = useState([]);


   const DeleteRoom = async(data) => {
    console.log("Body sent to server", {
    home_rooms: [data.item], 
  })
    await axios.delete("xxx.com",
      {
        home_rooms: [data.item], 
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        alert('Succeded delete room!');
        console.log('Succeded delete room!');
      })
      .catch(err => {
        alert('Missed delete room!');
        console.log(err);
        console.log('Missed delete room!');
      });
  }

  const getRoomName = async(data) => {
    await axios.get("xxx.com",
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        setRoomName(result.data.home_rooms);  
      })
      .catch(err => {
        console.log(err);
      });
  }



  useEffect(() => {
    getRoomName();
  },[]);




  return (
    <>

            {room_name.map((item,i) => 
              <div key={i}  className="flex_setting_get_room_box">
                  <div className="my_hubs">
                    <p className="">{item}</p>
                    <img src={ic_delete} onClick={(e)=>DeleteRoom({item})}/>
                  </div>
              </div>
            )}

    </>
  );
}
export default SettingGetRoomName;

CodePudding user response：

Check this link and the axios docs. The second parameter of axios.delete() is not the request body, but rather the request options. Simply add the body on the data key of the request options:

 await axios.delete("xxx.com", {
        data: {
            home_rooms: [data.item]
        },
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
    })
    .then(result => {
        alert('Succeded delete room!');
        console.log('Succeded delete room!');
    })
    .catch(err => {
        alert('Missed delete room!');
        console.log(err);
        console.log('Missed delete room!');
    });