React+Express+MySQL电商平台商品前端重复显示问题排查

核心问题定位 #

你遇到的重复显示问题，根源在于前端多次发起API请求，导致setProducts被重复调用；同时前后端重复做去重逻辑，反而容易引入潜在问题。结合你提供的日志和代码，以下是具体解决方案：

1. 消除多次API请求 #

原因排查

• React StrictMode 影响：React 18+ 在开发环境下的StrictMode会重复执行useEffect的回调（含清理函数），这是框架的调试机制，生产环境不会出现。可以查看控制台是否打印了多次ProductList mounted来确认。
• 组件重复挂载：如果ProductList被父组件频繁触发重新挂载（比如父组件state无意义更新、路由切换重复渲染），也会导致多次请求。

解决方案

• 若为StrictMode导致，可暂时在src/index.js中移除<StrictMode>标签（开发环境下）；或者保持StrictMode，确保fetchProducts是幂等操作（多次调用不影响最终结果）。
• 排查父组件逻辑：检查是否存在不必要的state更新，或确保ProductList的渲染依赖稳定（比如父组件传递的key是否唯一且不变）。

2. 简化去重逻辑，确保数据纯净 #

你当前前后端都做了去重操作，这不仅冗余，还可能因为数据处理逻辑不一致引发问题。建议：

后端层面（最彻底）

直接在SQL查询阶段确保无重复数据，比JS层面去重更高效：

// 后端接口修改：利用SQL去重，或确认product_id为主键（主键天然唯一）
app.get('/products', async (req, res) => {
    try {
        // 若product_id是主键，直接查询即可，无需JS去重
        const [rows] = await db.query('SELECT * FROM product');
        // 若表存在重复数据（不推荐），用DISTINCT关键字
        // const [rows] = await db.query('SELECT DISTINCT * FROM product');
        console.log('Fetched products:', rows);
        res.json(rows);
    } catch (error) {
        console.error('Error fetching products:', error);
        res.status(500).send('Error fetching products');
    }
});

前端层面

去掉前端的冗余去重逻辑，直接使用后端返回的纯净数据：

// ProductList组件中修改fetchProducts
const fetchProducts = async () => {
    try {
        const response = await axios.get('http://localhost:5000/products');
        if (response.status === 200) {
            console.log('Fetched products:', response.data);
            // 后端已确保无重复，直接设置
            setProducts(response.data);
        } else {
            throw new Error(`Unexpected response status: ${response.status}`);
        }
    } catch (error) {
        console.error('Error fetching products:', error.response ? error.response.data : error.message);
        setError('Error fetching products: ' + (error.response ? error.response.data : error.message));
    } finally {
        setLoading(false);
    }
};

3. 确认列表渲染的Key稳定性 #

你当前使用product.product_id作为map的key，这是正确的——确保product_id是表中唯一的主键，避免因key重复或不稳定导致React渲染异常。

内容的提问来源于stack exchange，提问作者Kurt Bernstein Blancia