React/Express环境下如何执行查询分类名称的Helper函数？

我来帮你一步步实现这个需求，顺便优化原代码里的潜在问题~

一、后端Express端：封装API接口并修复SQL风险 #

首先你的原函数存在SQL注入风险（直接拼接字符串到SQL语句里），而且目前只是控制台打印结果，没法给前端返回数据。我们需要把它改造成一个可被前端调用的API接口：

1. 优化查询逻辑（修复注入+调整SQL逻辑） #

原SQL里的EXISTS子句看起来有点多余——如果你的需求只是根据category_id查询分类名称，直接查询categories表就行；如果是要确保该分类下有商品才返回，那可以保留EXISTS。这里先给出两种版本：

// 版本1：仅根据ID查询分类名称（更常用）
const selectName = async (id) => {
  const result = await sequelize.query(
    `SELECT c.name FROM categories as c WHERE c.id = :id`,
    {
      type: sequelize.QueryTypes.SELECT,
      replacements: { id } // 参数化查询，避免SQL注入
    }
  );
  return result;
};

// 版本2：仅返回存在对应商品的分类名称（保留原EXISTS逻辑）
const selectNameWithProductCheck = async (id) => {
  const result = await sequelize.query(
    `SELECT c.name FROM categories as c 
     WHERE c.id = :id 
     AND EXISTS (SELECT 1 FROM product as p WHERE p.category_id = c.id)`,
    {
      type: sequelize.QueryTypes.SELECT,
      replacements: { id }
    }
  );
  return result;
};

2. 封装成Express路由接口 #

在你的Express项目里，新增一个路由来暴露这个查询能力：

// 假设你的Express实例是app，已经引入sequelize和上面的selectName函数
app.get('/api/category/name/:id', async (req, res) => {
  try {
    const categoryId = req.params.id;
    const categoryName = await selectName(categoryId);
    if (categoryName.length === 0) {
      return res.status(404).json({ message: '分类不存在' });
    }
    res.json({ name: categoryName[0].name });
  } catch (error) {
    console.error('查询分类名称失败:', error);
    res.status(500).json({ message: '服务器内部错误' });
  }
});

二、前端React端：调用API并展示数据 #

在React组件里，我们可以用fetch或者axios来请求后端接口，然后把数据渲染出来：

示例React组件 #

import { useState, useEffect } from 'react';

function CategoryNameDisplay({ categoryId }) {
  const [categoryName, setCategoryName] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchCategoryName = async () => {
      try {
        const response = await fetch(`/api/category/name/${categoryId}`);
        if (!response.ok) {
          throw new Error('分类查询失败');
        }
        const data = await response.json();
        setCategoryName(data.name);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    if (categoryId) {
      fetchCategoryName();
    }
  }, [categoryId]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return <div>分类名称：{categoryName}</div>;
}

export default CategoryNameDisplay;

使用组件 #

在需要展示分类名称的地方，传入商品的category_id即可：

// 假设你有商品数据product，其中包含category_id
<CategoryNameDisplay categoryId={product.category_id} />

额外说明 #

• 确保你的Express服务器和React项目的端口配置正确，如果是开发环境，可能需要在React的package.json里配置proxy字段，避免跨域问题（比如"proxy": "http://localhost:3001"，假设后端跑在3001端口）。
• 原函数里的.then()回调只是打印结果，改成async/await更便于在Express路由里处理异步逻辑，也更易读。

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