React/Shopify：如何将前端数据传到服务端实现PUT请求更新API数据

1. 前端组件修改（ProductsModal.jsx） #

在handleSelect函数中添加请求逻辑，把选中的产品ID和新名称发送到后端接口：

const handleSelect = async () => {
  // 组装要发送的更新数据
  const updatePayload = {
    newTitle: props.inputValue
  };

  try {
    // 发送PUT请求（更新资源推荐用PUT，也可根据后端配置改用POST）
    const response = await fetch(`/api/2022-10/products/${selectedExport}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updatePayload),
    });

    if (response.ok) {
      const updatedProduct = await response.json();
      console.log('产品更新完成:', updatedProduct);
    } else {
      console.error('产品更新失败');
    }
  } catch (err) {
    console.error('请求发送出错:', err);
  }

  // 保留原有的弹窗重置逻辑
  handleModalChange();
  handleSelectedExport([]);
  handleSelectedExportAs([]);
};

2. 后端接口修改（index.js） #

调整接口为动态路由，接收前端传递的产品ID和新名称，完成产品更新：

// 用PUT方法匹配更新操作，动态路由参数:productId接收产品ID
app.put(`/api/2022-10/products/:productId`, async (req, res) => {
  const session = await Shopify.Utils.loadCurrentSession(
    req,
    res,
    app.get("use-online-tokens")
  );
  const { Product } = await import(
    `@shopify/shopify-api/dist/rest-resources/${Shopify.Context.API_VERSION}/index.js`
  );

  // 从URL参数取产品ID，从请求体取新名称
  const { productId } = req.params;
  const { newTitle } = req.body;

  try {
    const product = new Product({ session: session });
    product.id = productId; // 绑定要更新的产品ID
    product.title = newTitle; // 设置新的产品名称

    const saveProduct = await product.save({
      update: true,
    });
    res.status(200).send(saveProduct);
  } catch (err) {
    console.error('后端更新产品出错:', err);
    res.status(500).send({ error: '产品更新失败' });
  }
});

核心要点： #

• 路由设计：用:productId动态参数替代固定的id路径，直接从req.params获取目标产品ID
• 请求方式：更新资源优先用PUT，符合REST规范；若后端对PUT支持有限，可替换为POST
• 参数传递：产品ID通过URL参数传递，新名称通过JSON请求体传递，避免GET请求的长度限制和安全性问题
• 错误处理：前端加请求状态校验，后端加try/catch捕获异常，返回明确的错误信息

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