ReactJS类组件点击点赞按钮后计数数值不更新问题求助

问题原因 #

• 状态更新方法调用错误：React类组件更新状态必须使用this.setState()，你写的this.state({likes: likes+1})是错误用法，this.state是存储状态的对象，不是更新函数。
• 点击事件回调未执行：onClick={() => this.likes_count}的写法只是返回了函数引用，没有触发函数执行，自然不会走更新逻辑。
• 冗余导入：你引入了仅函数组件可用的useState Hook，当前是类组件，这个导入完全无效可以删除。

修正后完整代码 #

import React from 'react';

class GiveLikes extends React.Component {
  // 初始化点赞数
  state = { likes: 0 };

  // 点赞计数逻辑
  likes_count = () => {
    // 推荐使用函数式更新，避免异步更新导致的状态不同步问题
    this.setState(prevState => ({
      likes: prevState.likes + 1
    }));
  }
    
  render() {
    return (
      <>
        <h2> {this.state.likes} </h2>
        <div className="buttons">
          <button 
            style={{
              fontSize: '60%',
              position: 'relative',
              top: '20vh',
              marginRight: '5px',
              backgroundColor: 'green',
              borderRadius: '8%',
              color: 'white',
            }}
            onClick={this.likes_count}
          >
            Likes
          </button>
        </div>  
      </>
    )
  }
}
  
export default GiveLikes;

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