基于状态变化的条件渲染仅在页面刷新时生效的问题

问题根源 #

你用useRef存储状态变量，但useRef的current值更新不会触发组件重渲染，所以即使值已经正确变化，页面也不会自动刷新，只有手动刷新页面才会读取新值。

解决步骤 #

1. 替换useRef为useState #

把原来的四个useRef变量换成useState，因为useState更新时会触发组件重渲染，让UI自动同步状态变化。

2. 简化状态逻辑 #

不用单独维护winnerA、winnerB、tie这三个变量，直接用outcome状态值在渲染时判断，减少冗余：

import { useState } from 'react';

function YourComponent() {
  // 用useState存储预测结果
  const [outcome, setOutcome] = useState('');

  // 发送API请求的函数
  const fetchPrediction = async () => {
    try {
      const response = await fetch('你的API地址', {
        method: 'POST',
        // 补充请求头、请求体等配置
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(/* 你的请求数据 */)
      });
      const result = await response.json();
      // 更新state，触发重渲染
      setOutcome(result.prediction);
    } catch (error) {
      console.error('请求出错:', error);
    }
  };

  // 渲染时直接根据outcome判断
  return (
    <div>
      {/* 触发请求的按钮 */}
      <button onClick={fetchPrediction}>获取预测结果</button>
      
      {/* 条件渲染文本 */}
      {outcome === 'userAW' || outcome === 'userBL' ? (
        <p>UserA获胜</p>
      ) : outcome === 'Draw' ? (
        <p>平局</p>
      ) : outcome === 'userBW' || outcome === 'userAL' ? (
        <p>UserB获胜</p>
      ) : null}
    </div>
  );
}

关键说明 #

• useRef适合存储不需要触发UI更新的可变值（比如DOM元素引用、定时器ID），不适合用来控制UI渲染的状态。
• useState是React专门用于管理组件状态的工具，每次调用setState都会让组件重新执行渲染逻辑，确保UI和状态一致。

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