React新增Click、Counter类组件后不渲染 控制台无报错问题排查

问题现象 #

在新增Click和Counter组件前，项目中所有组件均可正常渲染，新增两个组件后出现组件不渲染问题，浏览器控制台未返回报错信息。

相关代码 #

Click组件代码 #

import React, { Component } from 'react'

class Click extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         count: 0
      }
    }

    UpdateClick = () => {
        this.setState({count: this.state.count + 1});
    }

  render() {
    const {count} = this.count;
    return (
      <div>
          <button onClick = {this.UpdateClick}>Click {count} time</button>
      </div>
    )
  }
}

export default Click;

Counter组件代码 #

import React, { Component } from 'react'

export class Counter extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         count:0
      }
    }

    IncrementCount = () => {
        this.setState({count: this.state.count + 1})
    }

  render() {
      const {count} = this.state;
    return (
      <div>
          <button onMouseEnter = {this.IncrementCount}>incremented by {count}</button>
      </div>
    )
  }
}

App.js入口文件代码 #

import './App.css';

import Navbar from './components/Navbar';
import {ClassComponent, ClassComponent2} from './components/ClassComponent';
import Click from './components/Click/Click';
import Counter from './components/Counter/Counter';

function App() {
  return (
    <div className="App">
     <Navbar/>
     <ClassComponent/>
     <ClassComponent2/>
     <Click/>
      <Counter/>
    </div>
  );
}

export default App;

问题根因 #

代码中存在两处会导致渲染中断的错误：

• Click组件取值错误：render函数中解构count变量时，错误地从this.count取值。React类组件的状态统一存储在this.state属性上，this.count本身为undefined，对undefined执行解构操作会抛出运行时错误，直接中断整个组件树的渲染流程。
• Counter组件导入导出不匹配：Counter组件使用的是命名导出语法export class Counter，但App.js中使用默认导入语法引入组件，这种写法会导致导入的Counter变量值为undefined，尝试将undefined作为React组件渲染时同样会触发运行时错误。

注：控制台无报错通常是开启了日志过滤、安装了错误屏蔽类浏览器插件导致，正常场景下上述两类错误都会抛出明确的TypeError提示。

修复方案 #

两处错误分别修复即可：

1. 修复Click组件的取值错误：将render函数中的解构语句改为从this.state取值，修改后代码如下：

render() {
  const {count} = this.state; // 修正此处的取值来源
  return (
    <div>
        <button onClick = {this.UpdateClick}>Click {count} time</button>
    </div>
  )
}

2. 修复Counter组件的导入导出匹配问题，两种方案任选其一即可：
   • 方案1：在Counter组件文件末尾添加默认导出语句：export default Counter;
   • 方案2：修改App.js中Counter的导入语句为命名导入：import { Counter } from './components/Counter/Counter';

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