Question

我目前正在学习如何在React中使用钩子，并且目前正在使用useEffect。在我的最后几个项目中，我一直使用相同的API从（Opendota）中提取数据，并且只是以不同的方式调用数据。为什么不行的任何想法？我认为当我遗漏了useEffect

时，我就错过了一些重要的东西

heroes.services

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};

Herodropdown

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

Answer 1

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

未定义heroId，与getStatsById(undefined)相同

但这仅调用API ...可能您需要使用API调用的结果：

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

...但是我们不需要在每个渲染上都使用效果，我们应该定义仅在heroId更改时才触发效果：

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

可以是[]一次/首次通话。

如何有效使用useEffect

1 个答案: