运行Express后端输出[Function (anonymous)] 点击商品返回undefined如何解决

问题诱因 #

• 核心错误在server.js的路由定义逻辑：/api/products/:id路由仅声明了路径，没有绑定对应的请求处理函数，反而把商品查询逻辑错误写进了app.listen()的回调参数里。app.listen()的回调仅会在服务启动成功时执行一次，不会处理任何用户请求，因此单个商品的请求没有对应逻辑响应，返回undefined。
• app.listen()的回调中错误引用了不存在的data变量：你从./data.js导入的商品数组变量名是products，不存在data.products的写法。
• 你标注为config.js的代码存在逻辑矛盾：你在该文件中导入同文件的apiUrl，属于循环导入，会导致接口请求的路径读取失败。这是因为你错误将接口请求逻辑存放在了配置文件中，正常apiUrl应该单独定义在config.js，接口请求逻辑应该存放在api.js中。
• 启动日志中打印的[Function (anonymous)]就是因为你把请求处理函数错传给了console.log的第二个参数，属于上述路由逻辑错位的附带表现。

修复方案 #

1. 修正server.js代码 #

将商品查询逻辑从app.listen中挪出，补全单个商品路由的处理回调：

import express from 'express';
import cors from 'cors';
import { products } from './data.js';
const app = express();

app.use(cors());
// 全量商品接口
app.get('/api/products', (_req, res) => {
    res.send(products);
});
// 单个商品查询接口
app.get('/api/products/:id', (req, res) => {
    const product = products.find((x) => x._id === req.params.id)
    if (product) {
        res.send(product);
    } else {
        res.status(404).send({ message: 'Product Not Found' })
    }
})

// 服务启动仅打印日志
app.listen(5000, () => {
    console.log('serve at http://localhost:5000')
});

2. 修正接口请求文件的逻辑 #

将你标注为config.js的代码移动到api.js文件中，apiUrl单独定义在config.js，避免循环导入：

• config.js内容：

export const apiUrl = 'http://localhost:5000'

• api.js内容（就是你之前贴的config.js代码，修改导入路径）：

import axios from 'axios'
import { apiUrl } from "./config"

export const getProduct = async (id) => {
    try {
        const response = await axios({
            url: `${apiUrl}/api/products/${id}`,
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        if (response.statusText !== 'OK') {
            throw new Error(response.data.message);
        }
        return response.data;
    } catch (err) {
        console.log(err);
        return { error: err.message }
    }
};

3. 可选校验 #

在ProductScreen的render方法中打印request.id，确认解析到的商品ID和data.js中商品的_id字段值一致，避免路由解析错误导致查询不到商品。

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