reactjs - React / Typescript：单击另一个元素时如何触发一个元素上的功能？

问题描述

我正在编写一个迷你游戏，其中两张仓鼠图片争先恐后地看谁最可爱。

每次用户点击获胜图片时，我都需要在我的数据库中更新在该比赛中竞争的每个仓鼠对象的获胜/失败次数。

不过，我完全不知道如何在丢失的仓鼠对象上触发 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

任何人都可以帮助我吗？提前致谢：）

标签： reactjsdatabasetypescriptfunctiononclick

很抱歉缺少 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])

reactjs - React / Typescript：单击另一个元素时如何触发一个元素上的功能？

问题描述

解决方案

推荐阅读