React Hook useEffect 缺少依赖项：'getData'。包括它或删除依赖数组[重复]

Posted 2023-02-21

【中文标题】React Hook useEffect 缺少依赖项：\'getData\'。包括它或删除依赖数组[重复]

【英文标题】：React Hook useEffect has a missing dependency: 'getData'. Either include it or remove the dependency array [duplicate]React Hook useEffect 缺少依赖项：'getData'。包括它或删除依赖数组[重复]

【发布时间】：2021-08-24 08:27:26

【问题描述】：

我收到此错误 [React Hook useEffect 缺少依赖项：'getData'。包含它或删除依赖数组]请我解决这个问题..！

import React,  useEffect, useState  from "react";
import  Link  from "react-router-dom";

const Phaltu = (props) => 
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [value, setvalue] = useState([]);
  const getData = async () => 
    const res = await fetch(
      "http://51.143.173.5/api/developer/matchapi.php?Action=listCompetitions&EventTypeID=" +
        Id
    );
    const response = await res.json();
    setvalue(response);
    // console.log(response);
  ;
  useEffect(() => 
    getData();
  , []);
  return (
    <div>
      <ul>
        value.map((currentElement, index) => 
          return (
            <li key=index>
              <Link to="/" + Id + "/" + currentElement.competition.id>
                <p>currentElement.competition.name</p>
              </Link>
            </li>
          );
        )
      </ul>
    </div>
  );
;

export default Phaltu;

【问题讨论】：

将 getData 函数移到 useEffect 函数中。

应该和useEffect在同一个作用域内声明

【参考方案1】：

import React,  useEffect, useState  from "react";
import  Link  from "react-router-dom";

const Phaltu = (props) => 
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [value, setvalue] = useState([]);
 
  useEffect(() => 
 const getData = async () => 
    const res = await fetch(
      "http://51.143.173.5/api/developer/matchapi.php?Action=listCompetitions&EventTypeID=" +
        Id
    );
    const response = await res.json();
    setvalue(response);
    // console.log(response);
  ;
    getData();
  , []);
  return (
    <div>
      <ul>
        value.map((currentElement, index) => 
          return (
            <li key=index>
              <Link to="/" + Id + "/" + currentElement.competition.id>
                <p>currentElement.competition.name</p>
              </Link>
            </li>
          );
        )
      </ul>
    </div>
  );
;

将函数声明移到useEffect挂钩体中