狀態：
const [tiles, setTiles] = useState(tilesData)
狀態內的資料：（tilesData）
const defaultValueCard = {
name: 'Bahamut',
cardValues: { N: 0, E: 0, S: 0, W: 0 },
image: 'URL'
}
export const tilesData =
[
{ tileNumber: 1, card: defaultValueCard },
{ tileNumber: 2, card: defaultValueCard },
{ tileNumber: 3, card: defaultValueCard },
{ tileNumber: 4, card: defaultValueCard },
{ tileNumber: 5, card: defaultValueCard },
{ tileNumber: 6, card: defaultValueCard },
{ tileNumber: 7, card: defaultValueCard },
{ tileNumber: 8, card: defaultValueCard },
{ tileNumber: 9, card: defaultValueCard },
{ tileNumber: 10, card: defaultValueCard },
{ tileNumber: 11, card: defaultValueCard },
{ tileNumber: 12, card: defaultValueCard },
{ tileNumber: 13, card: defaultValueCard },
{ tileNumber: 14, card: defaultValueCard },
{ tileNumber: 15, card: defaultValueCard },
{ tileNumber: 16, card: defaultValueCard }
]
所述updateTile函式接收tileIndex（1-16之間編號），并且包含相同的資料作為一個新的卡defaultValueCard。
如何在此函式中更新狀態以在特定索引處用新卡替換舊卡？
const updateTile = (tileIndex, card) => {
/* take the tileIndex and update the current card with the parameter card */
}
uj5u.com熱心網友回復：
試試這個...
const [tiles, setTiles] = useState(tilesData);
const updateTile = (tileIndex, card) => {
/* take the tileIndex and update the current card with the parameter card */
const tilesCopy = [...tiles];
const oldTileIndex = tilesCopy.findIndex(tile => tile.tileNumber === tileIndex);
// a word of caution, oldTileIndex is undefined if tile with tileIndex DNE
tilesCopy[oldTileIndex] = {tileNumber: tileIndex, card};
setTiles(tilesCopy);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380165.html
標籤：反应
上一篇：use<endpoint><modifier>和endpoints.<endpoint>.<modifier>之間有區別嗎？