React动态切换内容触发Hook调用顺序错误的解决方案咨询

我正在实现井字棋网页游戏客户端，有两个TypeScript文件：

• TicTacToe.tsx：主展示组件，通过switch语句根据state切换显示输入界面、游戏界面或结束界面；
• TicTacToeAPI.tsx：负责游戏界面渲染和后端交互，调用时会建立WebSocket连接并初始化客户端游戏状态。

测试时出现以下错误警告：

TicTacToeAPI.tsx:5 Warning: React has detected a change in the order of Hooks called by TicTacToe. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks.

前后渲染的Hook调用顺序对比：

我原本以为Hook在各自函数组件内，这种界面切换不会引发问题，但显然理解有误，求标准解决方法。

相关代码 #

TicTacToe.tsx #

import React, { useState } from "react";
import TicTacToeAPI from "./TicTacToeAPI";

export default function TicTacToe() {
  const [menuState, setMenuState] = useState("login");

  const [nickname, setNickname] = useState("");
  const [roomNumber, setRoomNumber] = useState(0);

  return (
    <div className="TicTacToe">
      <h1>Tic Tac Toe</h1>
      {(() => {
        switch (menuState) {
          case "login":
            return input(setMenuState, setNickname, setRoomNumber);
          case "game":
            return game(setMenuState, roomNumber, nickname);
          case "end":
            return end();
          default:
            return null;
        }
      })()}
    </div>
  );
}

function game(
  setMenuState: React.Dispatch<React.SetStateAction<string>>,
  roomNumber: number,
  nickname: string
) {
  return (
    <>
      <div id="metaData">
        <p>Room number: {roomNumber}</p>
        <p>Nickname: {nickname}</p>
      </div>
      {TicTacToeAPI(nickname, roomNumber)}
      <div id="abandonButton">
        <button onClick={() => setMenuState("login")}>rage quit</button>
      </div>
    </>
  );
}

function end() {
  return <p>Game ended</p>;
}

function input(
  setMenuState: React.Dispatch<React.SetStateAction<string>>,
  setNickname: React.Dispatch<React.SetStateAction<string>>,
  setRoomNumber: React.Dispatch<React.SetStateAction<number>>
) {
  const [formData, setFormData] = useState({
    nickname: "genericName",
    roomNumber: 420,
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, [e.target.id]: e.target.value });
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // validate input
    if (!formData.nickname || !formData.roomNumber) {
      alert("Please enter a nickname and room number");
      return;
    }
    // set parameters
    setNickname(formData.nickname);
    setRoomNumber(formData.roomNumber);
    // change menu state
    setMenuState("game");
  };

  return (
    <div id="playerInfoInput">
      <form className="playerInfo" onSubmit={handleSubmit}>
        <h3>Nickname</h3>
        <input
          type="text"
          id="nickname"
          value={formData.nickname}
          onChange={handleInputChange}
        />
        <br />
        <h3>Room number</h3>
        <input
          type="number"
          id="roomNumber"
          value={formData.roomNumber}
          onChange={handleInputChange}
        />
        <br />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

TicTacToeAPI.tsx #

import React, { useEffect, useRef, useState } from "react";

export default function TicTacToeAPI(nickname: string, roomNumber: number) {
  //websocket
  const wsRef = useRef(new WebSocket("ws://localhost:8080/ticTacToe"));

  //set other data
  const [authToken, setAuthToken] = useState("");
(...)
  //websocket
  useEffect(() => {
    //configure message handler
    wsRef.current.onmessage = (message) => {
      handleMessage(message, stateData);
    };

    // Cleanup WebSocket connection when the component unmounts
    return () => {
      wsRef.current.close();
    };
  }, []);

  return (<p>board</p>)
}

问题根源与解决方法 #

核心问题 #

你直接调用了组件函数{TicTacToeAPI(nickname, roomNumber)}，而不是以JSX元素形式渲染。这种写法会让TicTacToeAPI内部的Hook被混入父组件TicTacToe的Hook调用队列中：

• 当menuState为login时，父组件Hook队列是自身3个useState + input函数里的1个useState，共4个useState；
• 切换到game状态后，input函数不再渲染，TicTacToeAPI的useRef成为第4个Hook调用，彻底打乱顺序，触发React的Hook校验机制。

修复步骤 #

1. 修改TicTacToeAPI的调用方式，将函数调用改为JSX元素：

// 原代码
{TicTacToeAPI(nickname, roomNumber)}

// 修改后
<TicTacToeAPI nickname={nickname} roomNumber={roomNumber} />

2. 调整TicTacToeAPI的参数接收方式，通过props获取参数：

// 原组件定义
export default function TicTacToeAPI(nickname: string, roomNumber: number) { ... }

// 修改后
interface TicTacToeAPIProps {
  nickname: string;
  roomNumber: number;
}

export default function TicTacToeAPI({ nickname, roomNumber }: TicTacToeAPIProps) { ... }

额外优化 #

1. 把input、game这类内部函数改成独立组件，避免在父组件渲染流程中动态执行带Hook的函数；
2. 将WebSocket初始化逻辑移到useEffect中，避免组件未挂载就建立连接：

const wsRef = useRef<WebSocket | null>(null);

useEffect(() => {
  wsRef.current = new WebSocket("ws://localhost:8080/ticTacToe");
  // 后续逻辑...
}, []);

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