[英]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.