如何将React类组件转换为函数组件并解决页面不更新问题

import React, { useState } from 'react';  

const Home = () => {
  const [tabType, setTabType] = useState('none');

  const toggleMe = (value) => {
    setTabType(value);
  };
  
  return ( 
    <div className='home_css'>
      <div>
        {tabType === 'none' && (
          <div>
            <button className='button_css' onClick={() => toggleMe('general')}>General</button>
            <button className='button_css' onClick={() => toggleMe('army')}>Army</button>
            <button className='button_css' onClick={() => toggleMe('police')}>Police</button>
            <button className='button_css' onClick={() => toggleMe('psi')}>PSI</button>
          </div>
        )}

        {tabType === 'general' && (
          <div className='card'>
            I am General division  
            <button onClick={() => toggleMe('none')}>Close</button>
          </div>
        )}
        {tabType === 'army' && (
          <div className='card'>
            I am Army division
            <button onClick={() => toggleMe('none')}>Close</button>
          </div>
        )}
        {tabType === 'police' && (
          <div className='card'>
            I am Police division
            <button onClick={() => toggleMe('none')}>Close</button>
          </div>
        )}
        {tabType === 'psi' && (
          <div className='card'>
            I am PSI division
            <button onClick={() => toggleMe('none')}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
};  

export default Home;

关键转换说明 #

• 用箭头函数定义函数组件替代类组件
• 使用useState Hook管理状态，替代类组件的state和setState方法，初始值保持'none'
• 移除所有this引用，直接调用状态更新函数setTabType
• 保留原有的条件渲染逻辑和事件绑定逻辑，确保功能与原组件完全一致

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