[英]Setting state of nested array with React Hooks
我已经使用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>
);
}
您需要利用团队索引并使用传播语法和切片来更新特定团队的价值,例如
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;
}
})
});
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.