request failed with status code 422 is returned by axios delete in react.js

Question

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;

Luciano · Accepted Answer · 2023-01-16 07:50:40Z

0

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!');
    });

answered Jan 16, 2023 at 7:50

Luciano

3841 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

request failed with status code 422 is returned by axios delete in react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related