如何使用 PATCH 請求更改 true/false 值並在 React 中呈現更改？

Question

我正在制作一個購物應用程序，我希望有一個按鈕可以向我的數據庫發送 PATCH 請求，以將值cart_status從false更新為true 。 我有按鈕工作，但我認為我的語法在PATCH function 上關閉。此外，如果有人特別有用，我的img標簽沒有呈現圖像，我不知道為什么（它們是外部圖像 URL，如果有幫助的話） ).

這是我的代碼：

import React, { useState } from "react";

function ItemCard({ item }) {

  const [addToCart, setAddToCart] = useState(true)

  const handleAddToCart = () => {
    setAddToCart(addToCart => !addToCart)
    fetch(`/items/${item.id}`, {
      method: 'PATCH',
      headers: {
        "Content-Type": 'application/json',
      },
      body: JSON.stringify(item.cart_status)
    })
      .then(resp => resp.json())
      .then(item(setAddToCart))
  }

  return (
    <div className="card">
      <img src={item.image_url} alt={item.item_name} />
      <h4>{item.item_name}</h4>
      <p>Price: ${item.price}</p>
      <p>* {item.description} *</p>
      {addToCart ? (
        <button className="primary" onClick={handleAddToCart}>Add To Cart</button>
      ) : (
        <button onClick={handleAddToCart}>Remove From Cart</button>
      )}
    </div>
  );
}

export default ItemCard;

單擊“添加到購物車”按鈕的結果更改了按鈕的 state，但沒有在數據庫中更新。 我還在終端中收到此錯誤消息：

Started PATCH "/items/1" for 127.0.0.1 at 2022-11-08 15:30:14 -0600
Processing by ItemsController#update as */*
  Parameters: {"_json"=>false, "id"=>"1"}
  Item Load (0.2ms)  SELECT "items".* FROM "items" WHERE "items"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/items_controller.rb:24:in `update'
Unpermitted parameters: :_json, :id
[active_model_serializers] Rendered ItemSerializer with ActiveModelSerializers::Adapter::Attributes (0.38ms)
Completed 202 Accepted in 3ms (Views: 0.7ms | ActiveRecord: 0.2ms | Allocations: 997)

Answer 1

因為 true/false 是 boolean 值，所以您可以向 rails 屬性發送補丁請求並使用 bang 運算符“.” 在后端翻轉錯誤。

import React, { useState } from "react";

function ItemCard({ item }) {
  // console.log(item)
  const [addToCart, setAddToCart] = useState(item.cart_status)

const handleAddToCart = () => {
setAddToCart(addToCart => !addToCart)

fetch(`/items/${item.id}`, {
  method: 'PATCH',
  headers: {
    "Content-Type": 'application/json',
  },
  body: JSON.stringify({ cart_status: !item.cart_status })
})
  .then(resp => resp.json())
  .then(data => console.log(data))

  window.location.reload(false)
}



return (
<div className="card">
  <img src={item.img_url} alt={item.item_name} />
  <h4>{item.item_name}</h4>
  <p>Price: ${item.price}</p>
  <p>* {item.description} *</p>
  {addToCart ? (
    <button onClick={handleAddToCart}>Remove From Cart</button>
  ) : (
    <button className="primary" onClick={handleAddToCart}>Add To Cart</button>
  )}
</div>
);
}

export default ItemCard;