为什么在提取函数中未定义匹配答案

【问题标题】：why is match undefined in fetch function为什么在提取函数中未定义匹配
【发布时间】：2020-06-21 13:50:19
【问题描述】：

我正在使用 match 来提取一个 ID，该 ID 将在 API 中搜索该 ID 并从中提取数据。这一直有效，直到我开始移动我的文件，现在我不确定如何将匹配传递给我的 fetch 函数

HeroDetail.services

import React from 'react'

export const fetchHeroDetail = async ({match}) => {
    const data = await fetch(`https://api.opendota.com/api/heroStats`)
    const item = await data.json()
    const heroId = match.params.id
    console.log(match.params.id)
    const hero = item.find(element => element.id === Number(heroId))
    console.log(hero)
    return await hero

};

HeroDetail 组件

import React, {useState, useEffect} from "react"
import "../App.css"
import {fetchHeroDetail} from './services/HeroDetail.services'

const setHeroDetail = async setHero => {
     const hero = await fetchHeroDetail()
    setHero(hero)
}

function HeroDetail() {

    const [hero, setHero] = useState({})

    useEffect(() => {
            setHeroDetail(setHero)
    },[])




    return(
        <div>
           <h1>{hero.localized_name} </h1>
            <h2>{hero.move_speed}</h2>
            <h2>{hero.base_health}</h2>
        </div>
    )
}

export default HeroDetail

【问题讨论】：

你在哪里定义match？你为什么不把它传递给fetchHeroDetail()？
“为什么匹配未定义” - 因为； fetchHeroDetail = async ({match}) => {...} 但fetchHeroDetail()
@jmargolisvt 我正在定义它，因为 match.params.id 是我要获取的 URL 中的 ID。
我认为问题是你在哪里定义它。之所以问它，是因为函数 fetchHeroDetail 需要一个参数，而您在调用它时永远不会给它。 HeroDetail 组件也没有任何代码表明参数可以在传递的道具中。

标签： javascript reactjs fetch react-hooks

【解决方案1】：

你应该这样做：

function HeroDetail() {

    const [hero, setHero] = useState({})

    useEffect(async () => {
         if (!hero) {
          const data = await fetchHeroDetail()
          setHero(data)
         }
    })
...
}

【讨论】：