React购物应用：PATCH请求更新cart_status失败及图片渲染问题

问题描述 #

开发购物应用时遇到两个问题：

• 点击按钮可切换状态，但发送PATCH请求无法将数据库中cart_status字段从false更新为true，终端报错参数不被允许。
• <img>标签无法渲染外部URL图片。

代码与错误信息 #

React组件代码 #

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;

终端报错信息 #

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)

解决方案 #

1. 修复PATCH请求同步问题 #

前端代码修正

问题出在请求体格式和回调函数语法错误：

• 请求体需传递包含cart_status的嵌套对象，Rails要求参数包裹在模型命名空间下（如item[cart_status]），而非直接传布尔值。
• then(item(setAddToCart))是语法错误，需改为正确的函数形式；同时先计算新状态，保证本地状态与请求状态一致，出错时可回滚。

修正后的handleAddToCart：

const handleAddToCart = () => {
  const newCartStatus = !addToCart;
  setAddToCart(newCartStatus);
  
  fetch(`/items/${item.id}`, {
    method: 'PATCH',
    headers: {
      "Content-Type": 'application/json',
      // 若Rails开启CSRF保护，必须添加该头
      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify({ item: { cart_status: newCartStatus } })
  })
  .then(resp => {
    if (!resp.ok) throw new Error('请求失败');
    return resp.json();
  })
  .then(updatedItem => {
    // 可选：用后端返回的数据同步本地状态，确保一致性
    // setAddToCart(updatedItem.cart_status);
  })
  .catch(err => {
    console.error('更新失败:', err);
    // 出错时回滚本地状态
    setAddToCart(!newCartStatus);
  });
}

后端Rails控制器修正

终端报错显示Unpermitted parameters，说明ItemsController的强参数未允许cart_status，需更新参数白名单：

# app/controllers/items_controller.rb
def update
  @item = Item.find(params[:id])
  if @item.update(item_params)
    render json: @item
  else
    render json: @item.errors, status: :unprocessable_entity
  end
end

private

def item_params
  params.require(:item).permit(:cart_status) # 将cart_status加入允许列表
end

2. 修复外部图片渲染问题 #

逐一排查以下可能原因：

• URL不完整：检查item.image_url是否为完整的HTTP/HTTPS链接，比如是否缺失http://或https://前缀。
• CORS限制：若图片来自外部域名，后端需配置CORS允许加载该资源，或通过后端代理转发图片请求。
• 浏览器CSP策略：若页面设置了内容安全策略，需在CSP的img-src指令中添加图片域名。
• 资源不可用：直接在浏览器地址栏访问item.image_url，确认图片是否存在、是否可正常加载。

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