Typescript 如何在不违反挂钩规则的情况下动态更改显示内容(带有状态)

我很惊讶您没有收到从嵌套函数调用钩子的Reaction Hooks错误.TicTacToeAPI、input或game都不是有效的react 功能组件.

更新代码，使这些函数是有效的react 组件，并将它们呈现为JSX，而不是直接调用.Reaction功能组件获取单个props 对象，各种props 可以从它解构.

示例:

TicTacTieAPI.tsx

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

interface TicTacToeApiProps {
  nickname: string;
  roomNumber: number;
};

export default function TicTacToeAPI({ nickname, roomNumber }: TicTacToeApiProps) {
  //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>)
}

TicTacToe.tsx

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

interface GameProps {
  setMenuState: React.Dispatch<React.SetStateAction<string>>;
  roomNumber: number;
  nickname: string;
}

function Game({ setMenuState, roomNumber, nickname }: GameProps) {
  return (
    <>
      <div id="metaData">
        <p>Room number: {roomNumber}</p>
        <p>Nickname: {nickname}</p>
      </div>
      <TicTacToeAPI nickname={nickname} roomNumber={roomNumber} /> // <-- JSX!
      <div id="abandonButton">
        <button onClick={() => setMenuState("login")}>rage quit</button>
      </div>
    </>
  );
}

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

interface InputProps {
  setMenuState: React.Dispatch<React.SetStateAction<string>>;
  setNickname: React.Dispatch<React.SetStateAction<string>>;
  setRoomNumber: React.Dispatch<React.SetStateAction<number>>;
}

function Input({ setMenuState, setNickname, setRoomNumber }: InputProps) {
  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>
  );
}

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

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

  const renderUi = () => {
    switch (menuState) {
      case "login":
        return (
          <Input
            setMenuState={setMenuState}
            setNickname={setNickname}
            setRoomNumber={setRoomNumber}
          />
        );

      case "game":
        return <Game {...{ setMenuState, roomNumber, nickname }} />;

      case "end":
        return <End />;

      default:
        return null;
    }
  };

  return (
    <div className="TicTacToe">
      <h1>Tic Tac Toe</h1>
      {renderUi()}
    </div>
  );
}