React中返回含不同JSX组件的if语句时的状态切换问题

错误原因分析 #

• 用普通let声明的searchingGame不是React响应式状态，修改后不会触发组件重渲染，所以点击后按钮文字不会更新
• JSX里写{isSearchingForGame}是直接引用函数本身，没有调用执行，导致按钮根本不渲染
• 函数内的判断条件写错：isSearchingForGame == true是在判断函数本身，而非searchingGame变量的实际值

正确代码实现 #

import { useState } from 'react';

function MatchFinder() {
  // 用useState声明响应式状态，初始值为false
  const [searchingGame, setSearchingGame] = useState(false);

  // 点击事件处理函数，仅负责切换状态
  const toggleSearchStatus = () => {
    setSearchingGame(prevState => !prevState);
  };

  return (
    <div className="look-ranked-container">
      <div className="time-searching">Searching: 00:23 min</div>
      {/* 根据状态直接渲染对应文字的按钮 */}
      <button 
        onClick={toggleSearchStatus} 
        className="find-match"
      >
        {searchingGame ? 'Searching for a Match' : 'Find Match'}
      </button>
    </div>
  );
}

关键改动说明 #

• 使用useState钩子管理状态：React会监听状态变化，状态更新时自动触发组件重渲染，保证按钮文字同步更新
• 拆分逻辑：点击事件仅负责修改状态，渲染逻辑直接写在JSX中，符合React的状态驱动渲染思路
• 直接通过状态值判断按钮显示文字，避免了函数引用错误和冗余的JSX返回逻辑

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