我一直在与React Hooks合作,但对我来说最大的问题是使用数组。
我正在为团队制作注册表。球队有球员(球队阵列)。
用户应该能够添加团队,并且对于每个团队,将显示输入,其中显示输入上方显示的团队中的当前成员。
我的问题:如何使用React Hooks设置嵌套数组的状态?
在按钮单击时,它应该(现在)将字符串添加到当前团队的player数组中。
我的代码:
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>
);
}
您需要使用团队索引并使用spread syntax和slice更新特定团队的价值
function addPlayer(index) {
setTeams(prevTeams => {
return [ ...prevTeams.slice(0, index), {...prevTeams[index], players: [...prevTeams[index].players, "c"] }, ...prevTeams.slice(index+1)];
});
}
或者更好,你可以使用map来更新
function addPlayer(index) {
setTeams(prevTeams => {
return prevTeam.map((team, idx) => {
if(index === idx) {
return {...prevTeams[index], players: [...prevTeams[index].players, "c"]}
} else {
return team;
}
})
});
}
const { useState } = React;
function Team() {
const [teams, setTeams] = useState([{ id: "1", players: ["a", "b"] }]);
function addPlayer(index) {
setTeams(prevTeams => {
return [ ...prevTeams.slice(0, index), {...prevTeams[index], players: [...prevTeams[index].players, "c"] }, ...prevTeams.slice(index+1)];
});
}
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={() => addPlayer(teamIndex)}>Add player</button>
</div>
);
})}
</div>
);
}
ReactDOM.render(<Team />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>