React表单内变量无法实现组件条件渲染的问题求助

你现在的核心问题是：直接在onSubmit回调里写<Wrong />组件不会生效——React组件只能在组件的渲染流程（JSX返回部分）里输出，回调里的JSX不会被挂载到DOM上。用state控制渲染是正确思路，只需调整变量作用域，把状态提到组件顶层即可，具体改法如下：

步骤1：添加状态变量 #

在组件顶层（表单外部）用useState声明一个状态，用来控制错误组件的显示/隐藏：

import { useState } from 'react';
// ...其他必要导入（比如react-hook-form的相关方法）

function YourGameComponent() {
  const [showWrongHint, setShowWrongHint] = useState(false);
  // ...这里放champions、correctChampion等已定义的变量

步骤2：修改表单提交逻辑 #

在onSubmit回调里，根据输入是否正确更新状态，不再直接渲染组件：

<form
  onSubmit={handleSubmit((data) => {
    const userInput = data.guess;
    const isAnswerCorrect = userInput.toUpperCase() === correctChampion.toUpperCase();
    
    if (!isAnswerCorrect) {
      setShowWrongHint(true);
    } else {
      // 答对后的逻辑，比如重置错误提示、触发成功动画等
      setShowWrongHint(false);
    }
  })}
>

步骤3：在渲染流程里加入条件渲染 #

在表单下方（或你希望显示错误提示的位置），用条件渲染控制<Wrong />的显示：

</form>
{showWrongHint && <Wrong text="Class" alt="wrong img" img={wrong} />}

完整修改后的代码示例 #

import { useState } from 'react';
import { useForm, handleSubmit, register } from 'react-hook-form';
// 导入Wrong组件和对应的错误图片

function LeagueWordle() {
  const [showWrongHint, setShowWrongHint] = useState(false);
  const { register, handleSubmit } = useForm();
  // 假设以下变量已提前定义
  const champions = {/* 你的英雄列表对象 */};
  const correctChampion = "正确英雄名称";

  return (
    <main class="gameSection">
      <h1>Welcome to League of Wordle!</h1>
      <form
        onSubmit={handleSubmit((data) => {
          const userInput = data.guess;
          const isAnswerCorrect = userInput.toUpperCase() === correctChampion.toUpperCase();

          if (!isAnswerCorrect) {
            setShowWrongHint(true);
          } else {
            setShowWrongHint(false);
            // 可添加答对后的额外逻辑，比如清空输入框、显示成功提示
          }
        })}
      >
        <input 
          {...register("guess")} 
          class="guess_input" 
          placeholder="Enter Champion Name Here" 
          type="text" 
          // 可选：输入时自动隐藏错误提示
          onChange={() => setShowWrongHint(false)}
        />
        <input class="guess_input" type="submit" />
      </form>
      {/* 条件渲染错误组件 */}
      {showWrongHint && <Wrong text="Class" alt="wrong img" img={wrong} />}
    </main>
  );
}

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