Reactjs中使用Axios请求无用户计数数据时如何显示0？

问题根因 #

你当前的问题核心出在前端的请求判断逻辑上：

1. Sequelize的count()方法本身在没有匹配到用户点赞数据时，就会返回数字类型的0，后端接口返回值本身是正确的
2. 客户端代码的if (res.data)判断存在逻辑漏洞：数字0在JavaScript中属于假值，当接口返回0时判断条件不成立，不会触发state更新
3. 如果你的likedCountstate没有显式设置初始值为0，默认值为undefined，渲染时就会显示空白

解决方案 #

方案1：前端修改（推荐，改动量最小） #

第一步：给状态设置初始值为0

// 声明状态时指定初始值
const [likedCount, setLikesCounts] = useState(0);

第二步：调整Axios请求逻辑，去掉错误的假值判断，增加兜底逻辑

axios
.get(`${targetServer}/like/likescounter/${id}`)
.then((res) => {
  // 直接赋值，用空值合并运算符兜底，哪怕返回值异常也显示0
  setLikesCounts(res.data ?? 0);
  console.log(res.data);
})
.catch((err) => {
  console.log(err);
  // 请求出错时也兜底显示0
  setLikesCounts(0);
});

第三步：UI渲染层可额外加一层兜底，兼容极端情况

<span className="text-gray-700">
  {likedCount ?? 0}
</span>

方案2：后端改造（可选，提升接口健壮性） #

你也可以调整后端返回结构，用结构化对象返回数据，避免前端误判数值类假值：

// user likes counter
router.get("/likescounter/:id", async (req, res) => {
  const id = req.params.id;
  try {
    const likesCounter = await Likes.count({
      where: { UserId: id },
    });
    res.json({
      code: 200,
      data: likesCounter,
      msg: "查询成功"
    });
    console.log("Likes counter in like", likesCounter);
  } catch (err) {
    console.log(err);
    res.status(500).json({
      code: 500,
      data: 0,
      msg: "查询失败"
    });
  }
});

对应前端取值逻辑调整为：

setLikesCounts(res.data.data ?? 0);

评论数、提问数的两个接口按照同样逻辑修改即可实现需求。

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