如何使用reactjs在Axios中没有数据时显示消息？

Question

我正在开发一个 reactjs 项目，并且 nodejs 我有 3 个路由器来计算用户 cmets、喜欢、提出的问题，如果他们提出问题或发表评论，我需要向她/他的个人资料显示结果在某人的帖子上，如果用户是全新的，我只想显示 (0)

我该怎么做？ 这是服务器端的代码

// user likes counter
router.get("/likescounter/:id", async (req, res) => {
  const id = req.params.id;
  const likesCounter = await Likes.count({
    where: { UserId: id },
  });
  res.json(likesCounter);
  console.log("Likes counter in like", likesCounter);
});

这是客户端代码

    axios
  .get(`${targetServer}/like/likescounter/${id}`)
  .then((res) => {
    if (res.data) {
      setLikesCounts(res.data);
      console.log(res.data);
    }
  })
  .catch((err) => {
    console.log(err);
  });

最后，这是我在 UI 中呈现结果的地方

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

另外，用户界面是这样的：

有什么建议吗？

Answer 1

根据评论部分的信息，如果数据是假的（未定义，空），我假设您想显示 (0)

所以你需要创建一个nullish coalescing operator

首先，确保您的状态初始化如下：

const [likedCount, setLikedCount] = useState(0);

然后更新你的 jsx：

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

或者Logical OR，如果你还想显示0，如果它返回一个假值

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

---

旧浏览器或无 babel 配置项目的替代方案：

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

如果likedCount === undefined 或 null 它将显示0