使用 React Hooks 设置嵌套数组的状态

Question

我使用 React Hooks 一段时间了，但对我来说最大的问题是使用数组。

我正在为团队制作一份注册表。球队有球员（字符串数组）。

用户应该能够添加团队，并且对于每个团队，都会显示一个输入，并在输入上方显示团队中的当前成员。

我的问题：如何使用 React Hooks 设置嵌套数组的状态？

单击按钮时，它应该（目前）将一个字符串添加到当前团队的玩家数组中。

我的代码：

interface ITeam {
    id: string;
    players: Array<string>;
}


export default function Team() {
const [teams, setTeams] = useState<Array<ITeam>>([{id: '1', players: ['a', 'b']}]);

return (
    <div>
        {teams.map((team, teamIndex) => {
            return (
                <div key={teamIndex}>
                    <h2>Team {teamIndex + 1}</h2>
                    <ul>
                        {team.players.map((player, playerIndex) => {
                            return (
                                <div key={playerIndex}>
                                    {player}
                                </div>
                            );
                        })}
                    </ul>
                    <button onClick={() => setTeams([...teams, team.players.concat('c')])}>Add player</button>
                </div>
            );
        })}
    </div>
);
}

Answer 1

您需要利用团队索引并使用扩展语法和切片来更新特定团队值

  function addPlayer(index) {
    setTeams(prevTeams => {
      return [ ...prevTeams.slice(0, index), {...prevTeams[index], players: [...prevTeams[index].players, "c"] }, ...prevTeams.slice(index+1)];
    });
  }

或者更好的是你可以使用地图来更新

function addPlayer(index) {
  setTeams(prevTeams => {
    return prevTeam.map((team, idx) => {
      if(index === idx) {
        return {...prevTeams[index], players: [...prevTeams[index].players, "c"]}
      } else {
        return team;
      }
    })
  });
}

  function addPlayer(index) {
    setTeams(prevTeams => {
      return [ ...prevTeams.slice(0, index), {...prevTeams[index], players: [...prevTeams[index].players, "c"] }, ...prevTeams.slice(index+1)];
    });
  }

function addPlayer(index) {
  setTeams(prevTeams => {
    return prevTeam.map((team, idx) => {
      if(index === idx) {
        return {...prevTeams[index], players: [...prevTeams[index].players, "c"]}
      } else {
        return team;
      }
    })
  });
}