React+PHP项目中axios.delete非对象错误及删除失败问题排查

Let's break down your issues step by step — I see two key mismatches between your frontend and backend that are causing this error and the failed deletion:

1. Frontend Axios Call: Sending the Wrong Value #

Your current code passes the string 'id' instead of the actual id variable to the res_id parameter. That means you're sending res_id=id instead of the number you logged in the console.

Corrected Frontend Code #

reservationDelete(id: number) {
  console.log(id);
  axios.delete(`http://localhost/react-restaurant-booking-backend/delete.php`, { 
    params: { res_id: id } // Use the variable `id`, not the string 'id'
  })
  .then((res: any) => {
    console.log('Item clicked');
    console.log(res);
  })
  .catch(err => {
    console.error('Delete failed:', err); // Add catch to debug errors easily
  })
}

With this fix, Axios will append the ID to your URL as a query parameter: delete.php?res_id=4 (for example).

2. Backend PHP: Wrong Data Source #

Your PHP code tries to parse the request body with file_get_contents('php://input'), but Axios sends params as URL query parameters, not in the request body. This is why $data ends up as null (hence the "non-object" error) — there's nothing in the request body to decode.

Corrected Backend Code #

// Skip parsing the request body — get the ID directly from URL query parameters
if (isset($_GET['res_id'])) {
  $reservation = new Reservations();
  $reservation->res_id = $_GET['res_id'];
  $delete = $reservation->adminDeleteReservation($pdo);
  echo $delete;
} else {
  echo json_encode(['error' => 'res_id parameter missing']);
}

Why Postman Worked #

You likely tested Postman by sending the params object in the request body (as JSON), which matches your original PHP code. But your React app uses Axios's params option, which behaves differently — it appends data to the URL instead of sending it in the body.

内容的提问来源于stack exchange，提问作者ahnnao