为什么React组件state中的count值未在浏览器正常渲染？

你提供的组件本身渲染逻辑没有问题，count值不显示几乎都是样式问题导致，以下是排查和修复步骤：

你原有代码如下：

import React, { Component } from 'react';

class Product extends Component {
    state = { 
        name: "Burger",
        count: 3,
        imgUrl: "logo192.png"
     }

    render() { 
        return ( 
            <div>
                <img src={this.state.imgUrl} alt="" />
                <span style={{ color: "red" }}>{this.state.name}</span>
                <span className="badge badge-warning m-2">{this.state.count}</span>
            </div>
         );
    }
}
 
export default Product;

排查&修复步骤 #

• 先确认count是否真的未渲染：打开浏览器F12开发者工具，切换到元素(Elements)面板，找到包裹count的span标签，查看标签内是否有数值3。如果存在，说明渲染正常，只是样式导致文字不可见。
• 临时去掉className验证：把count对应的span标签的className属性删除，直接写<span>{this.state.count}</span>，刷新页面如果能看到数值，就可以确认是Bootstrap样式未正确引入导致的问题。
• 引入Bootstrap样式修复：你用到的badge、badge-warning、m-2都是Bootstrap提供的样式类，你可以选任意一种方式引入Bootstrap：
  • CDN引入：在项目public目录下的index.html的head标签内添加如下代码：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    

  • 包管理工具引入：先执行安装命令npm install bootstrap，然后在项目入口文件（一般是src/index.js）顶部导入样式：

    import 'bootstrap/dist/css/bootstrap.min.css'
    

引入完成后刷新页面，count值就会正常显示。

内容的提问来源于stack exchange，提问作者Qatr El-Nada