React应用博客功能异常：文章无法显示，求排查原因

以下是从后端到前端的逐步排查步骤：

1. 验证后端接口有效性 #

直接在浏览器地址栏访问 http://localhost:3002/api/get，检查返回结果：

• 如果返回空数组：说明数据库posts表中没有数据，或者查询语句有误。
• 如果返回错误信息/undefined：后端错误处理逻辑存在漏洞，当前代码在查询出错时仍会执行res.send(result)，此时result可能为undefined，导致前端拿到无效数据。需要修改后端代码，在出错时终止请求并返回错误：

app.get("/api/get", (req, res) => {
    con.query("SELECT * FROM posts", (err, result) => {
        if (err) {
            console.log(err);
            return res.status(500).json({ error: err.message }); // 新增错误返回逻辑
        }
        res.json(result); // 用res.json确保返回标准JSON格式
    });
});

2. 检查跨域问题 #

React默认运行在3000端口，后端在3002端口，浏览器会拦截跨域请求。如果浏览器控制台出现跨域相关错误，需要在Express后端配置CORS：

• 安装cors包：npm install cors
• 在后端代码中启用（放在路由配置之前）：

const cors = require('cors');
app.use(cors());

3. 检查前端请求状态 #

打开浏览器开发者工具的Network标签，查看/api/get请求：

• 确认请求状态码为200：如果是404，说明后端路由配置错误；如果是500，说明后端查询数据库出错。
• 查看Response内容：确认返回的是包含文章对象的数组，且字段名（title、post_text、user_name、likes）与前端使用的完全一致。

4. 排查前端数据处理逻辑 #

查看浏览器控制台的console.log(data)输出：

• 如果data.data是undefined：说明后端没有返回有效数据，回到步骤1修复后端。
• 如果data.data是数组但渲染无内容：检查postList的更新是否正常，可在组件中添加console.log(postList)确认数据是否已存入状态。另外，使用可选链操作符避免map空值报错：

{postList?.map((val, key) => {
  // 渲染逻辑
})}

5. 检查渲染样式问题 #

即使数据正确渲染，也可能因CSS导致元素不可见：

• 打开浏览器开发者工具的Elements标签，查看.PostContainer和.Post元素是否存在。
• 检查元素的display、opacity、visibility等样式属性，确认没有被隐藏或覆盖。

6. 验证数据库字段匹配 #

确保MySQLposts表中的字段名与前端使用的完全一致：

• 比如前端用val.post_text，数据库字段必须是post_text（而非postText或其他命名）；如果字段名不匹配，会导致渲染内容为空。

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