Reactjs 如何有效地使用useffect

我目前正在学习如何在React中使用钩子，我目前正在使用useEffect。在我最近的两个项目中，我一直在使用相同的API从（Opendota）中提取数据，并使用不同的方法调用数据。你知道为什么这样不行吗？我想我错过了一些重要的东西，当它看起来很有用的时候

英雄服务

import React from 'react'

const getStatsById = heroId => async () => {
    const resp = await fetch("https://api.opendota.com/api/heroStats");
    const statsList = await resp.json();
    return statsList.find(stats => stats.id === heroId)
};

export {getStatsById};

Hero下拉列表

import React, { useState, useEffect } from "react";

import {getStatsById} from '../services/heroes.service.js'


const Herodropdown = () => {
    useEffect(getStatsById(heroId));
    return (
        <h2> {heroId}</h2>

        )
}
export default Herodropdown

import React，{useState，useffect}来自“React”；
从“../services/heroses.service.js”导入{getStatsById}
常量下拉列表=（）=>{
useEffect（getStatsById（海洛因））；
返回(
{英雄主义者}
)
}
导出默认值下拉列表

。。。但我们不需要在每次渲染时都使用effect，我们应该定义它只应在

英雄

更改时触发：

      useEffect( () => { setStats( getStatsById(heroId) ) }, [heroId] );

---

一次/首次通话可以是

[]

。

你说的“不工作”是什么意思？API调用没有被激发？您不会对来自API的响应执行任何操作。您只需返回它，但它不会保存到状态。您还应该包括您的effect的依赖项列表。我认为格式可能有误。尝试运行useffect（（）=>getStatsById（heroId））而不是@jayce444。hero下拉列表中，{heroId}被称为undefined，因此我试图查看原因是否为useffect。我同意@EdgarCuarezma的说法。我相信useffect格式不正确。除此之外，您没有指定可能导致无限循环等的依赖关系数组。Edgarguarezma发送的链接中也应概述这些依赖关系数组。我建议使用react hooks eslint插件设置eslint以帮助捕获其中一些错误！将协助学习新的hooks语法。祝你好运：D@4156好的，那么英雄主义的定义在哪里呢？我在下拉列表中没有看到它的定义。另外，他的

useffect

第一个参数的格式是可以的，因为

getStatsById

返回的函数不是一个值。我决定使用您的解决方案，虽然这似乎是最好的选择，但我仍然会遇到一些错误。似乎我用setStats得到的东西不是函数对不起，我定义错了。。。应该是

const[stats，setStats]=useState（null）
  const Herodropdown = (heroId) => {
    const [stats, setStats] = useState(null);
    useEffect( () => { setStats( getStatsById(heroId) ) } );
    return (
      <>
        <h2> {heroId}</h2>
        stats: {stats}
      </>
    )
  }

      useEffect( () => { setStats( getStatsById(heroId) ) }, [heroId] );