我正在撰寫一個迷你游戲，其中兩只倉鼠的圖片打架看誰最可愛。
每次用戶點擊獲勝圖片時，我都需要在我的資料庫中更新該比賽中每個倉鼠物件的獲勝/失敗次數。
不過，我完全不知道如何在丟失的倉鼠物件上觸發 updateDefeats 函式，該物件尚未被單擊。
這是我的代碼：
import { useEffect, useState } from 'react';
import { Hamster } from '../../models/Hamster';
import FighterCard from './FighterCard'
import '../../styles/game.css'
type Hamsters = Hamster;
const baseUrl = 'http://localhost:1337';
const Game = () => {
const [fighters, setFighters] = useState<Hamsters[] | null>(null)
useEffect(() => {
getFighters(setFighters)
}, [])
function newGame() {
getFighters(setFighters)
}
function updateWin(id: string, wins: number, games: number) {
const newWins = wins 1;
const newGames = games 1;
return fetch(baseUrl '/hamsters/' id, {
method: 'PUT',
headers: { "Content-Type": "application/json" },
body: JSON.stringify({wins: newWins, games: newGames})
})
}
function updateDefeats(id:string, defeats: number, games: number) {
const newDefeats = defeats 1;
const newGames = games 1;
return fetch(baseUrl '/hamsters/' id, {
method: 'PUT',
headers: { "Content-Type": "application/json" },
body: JSON.stringify({defeats: newDefeats, games: newGames})
})
}
return (
<div className='game'>
<h2>Let the fight begin!</h2>
<p>Click on the cutest hamster</p>
<section className="fighters">
{fighters
? fighters.map(fighter => (
<FighterCard fighter={fighter} key={fighter.id} updateWin={updateWin}/>
))
: 'Loading fighters...'}
</section>
<button onClick={newGame}>New Game</button>
</div>
)
};
async function getFighters(saveFighters: any) {
const response = await fetch(baseUrl '/hamsters');
const data = await response.json()
const fighters = await data.sort(() => .5 - Math.random()).slice(0,2)
saveFighters(fighters)
};
export default Game
任何人都可以幫助我嗎？提前致謝 ：）
uj5u.com熱心網友回復：
很抱歉缺少 TS，但添加打字不需要太多時間；)。您可以創建一個fighters依賴回呼并將其放入您的onClick：
const concludeTheFight = useCallback((winningFighter, ...) => {
const winningFighterFilter = fighter => fighter !== winningFighter
const defeatedFighters = fighters.filter(winningFighterFilter)
const defeatUpdates = defeatedFighters.map(updateDefeats)
const winUpdate = updateWin(winningFighter)
// if you need the responses to update your fighters:
const defeatResponses = await Promise.all(defeatUpdates)
const winResponse = await winUpdate
// I think you will figure out how to deal with them by yourself :)
}, [fighters])
uj5u.com熱心網友回復：
如果只有兩只倉鼠，那么你知道輸家一定是沒有贏的那個。所以你可以有一個小的控制器函式，它接受獲勝倉鼠的 id，并呼叫updateWin和updateDefeat。
function updateWinnersAndLosers = (winnerId: string) => {
const winner = fighters.find(fighter => fighter.id === winnerId);
const loser = fighters.find(fighter => fighter.id !== winnerId);
updateWin(winner.id, winner.wins, winner.games);
updateDefeat(loser.id, loser.defeats, loser.games);
}
...
/*inside your fighters.map */
<FighterCard fighter={fighter} key={fighter.id} updateWin={updateWinnersAndLosers}/>
如果你最終與 3 倉鼠打架，你可以切換到類似
const losers = fighters.filter(fighter => fighter.id !== winnerId);
losers.forEach(loser => updateDefeat(loser.id, loser.defeats, loser.games))
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/348628.html