Reactjs 在Reaction中管理多个状态

您可以做的是，让数组处于一种状态，并将其每个值设置为''.

const [seeds, setSeeds] = useState(Array(128).fill(''));
const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

然后，只要状态改变，就设置它的值

const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

在这里，它是根据您的问题完整的代码.

import React, { useState } from 'react';

const TennisBracket = ({ games, round }) => {
  const [seeds, setSeeds] = useState(Array(128).fill(''));
  const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

  const getCurrentSeed = (position) => seeds[position] || '';

  const getCurrentATPPlayer = (position) => ATPPlayers[position] || {};

  const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

  return (
    <div>
      {Array.from(Array(128)).map((p, index) => {
        const oddIndex = index * 2 + 1;

        return (
          <div key={index}>
            <div className="player">
              {/* Use your ATPPlayerFinderWrapper or any other component */}
              {/* Assuming it has a callback to pass the selected player to the parent */}
              <ATPPlayerFinderWrapper
                position={oddIndex}
                setATPPlayerId={setATPPlayerId}
                setCurrentPosition={setCurrentPosition}
                ATPPlayer={getCurrentATPPlayer(oddIndex)}
                onPlayerChange={(player) => handleATPPlayerChange(oddIndex, player)}
              />
            </div>
            <div className="seed">
              <TextField
                id={`seed${oddIndex}`}
                label="Seed"
                variant="standard"
                onChange={(e) => handleSeedChange(oddIndex, e.target.value)}
                InputProps={{ disableUnderline: true }}
                value={getCurrentSeed(oddIndex)}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
};