如何解决Class component is declared but its value is never read报错？

这个报错是ESLint或TypeScript的静态检查提示，核心原因是你声明的类组件没有在代码中被实际调用使用，可根据你的实际需求选择对应解决方案：

• 场景1：确认该组件后续不会使用
  直接删除整个类组件的声明代码即可，提示会自动消失。
• 场景2：你本需要使用该组件，属于漏写/写错调用逻辑
  重点排查以下几个常见问题：
  • 检查组件调用时的名称大小写是否和声明一致，React要求组件首字母必须大写，比如你声明的是class OrderCard extends Component，调用时错写为<orderCard />就会被识别为原生HTML标签，不会触发自定义组件的引用。
  • 检查组件的导出导入逻辑是否匹配：如果是export default OrderCard默认导出，导入时要写import OrderCard from './xxx'，如果写成带大括号的具名导入就会匹配失败，导致实际没有用到你声明的组件。
  • 检查组件调用逻辑是否被注释，或者条件渲染的判断逻辑永远不会走到该组件的调用分支，调整对应逻辑确保组件会被正常渲染即可。
• 场景3：你需要临时保留该组件，暂时不调用
  可以手动屏蔽单行的未使用变量检查，在组件声明行上方加对应注释即可：
  • TS环境加 // eslint-disable-next-line @typescript-eslint/no-unused-vars
  • 普通JS环境加 // eslint-disable-next-line no-unused-vars
    不建议全局关闭未使用变量的检查规则，会漏掉其他真正的无用代码提示

给个代码示例参考：

// 错误示例：声明了UserCard但没有调用
class UserCard extends React.Component {
  render() {
    return <div>用户名：{this.props.name}</div>
  }
}

export default function App() {
  return <div>首页内容</div>
}

// 修正示例：在App中调用UserCard
class UserCard extends React.Component {
  render() {
    return <div>用户名：{this.props.name}</div>
  }
}

export default function App() {
  return <div>
    首页内容
    <UserCard name="张三" />
  </div>
}

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