React Hook React.useEffect缺少依赖项：'loadData'。包括它或删除依赖项数组

Question

我在react js的以下组件中收到此警告React Hook React.useEffect缺少依赖项：“ loadData”。包括它或删除依赖项数组。无法找出问题所在

const ManageCourses = (props) => {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    loadData();
  }, [props.instructor]);

  const loadData = async () => {
    setLoading(true);
    await axios
      .get(
        "http://localhost:4000/api/instructorcourses/" +
          props.instructor.InstructorID
      )
      .then((res) => {
        setData(res.data);
        setLoading(false);
      });
  };

  return (
    <div>
      {console.log(props.instructor)}
      <Row>
        <Col span={19}></Col>
        <Col span={4}>{/*<AddBadge loadData={loadData} />*/}</Col>
        <Col span={1}></Col>
      </Row>
      <br />
      <table className="table table-striped table-sm table-bordered small">
        <thead>
          <tr>
            <th className="w-25">Badge Name</th>
            <th className="w-75">Badge Detail</th>
            <th>Action</th>
          </tr>
        </thead>
        {!loading && (
          <tbody>
            {data.map((data, index) => ({
              /*<SingleBadge data={data} key={index} loadData={loadData} />*/
            }))}
          </tbody>
        )}
      </table>
    </div>
  );
};

Answer 1

似乎loadData方法仅在useEffect挂钩中使用。如果是这种情况，您只需将其嵌套在useEffect()挂钩中即可删除警告。

React Hook React.useEffect缺少依赖项：'loadData'。包括它或删除依赖项数组

 useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      await axios
        .get(
          "http://localhost:4000/api/instructorcourses/" +
            props.instructor.InstructorID
        )
        .then((res) => {
          setData(res.data);
          setLoading(false);
        });
    };
    loadData();
  }, [props.instructor, setData]);

或者，您可以使用useCallback钩子返回已记忆的loadData功能。

const loadData = useCallback(async () => {
      setLoading(true);
      await axios
        .get(
          "http://localhost:4000/api/instructorcourses/" +
            props.instructor.InstructorID
        )
        .then((res) => {
          setData(res.data);
          setLoading(false);
        });
    }, [setData]);


useEffect(() => {
  loadData();
}, [props.instructor, loadData]);

Answer 2

似乎loadData方法仅在useEffect挂钩中使用。如果是这种情况，您只需将其嵌套在useEffect()挂钩中即可删除警告。

React Hook React.useEffect缺少依赖项：'loadData'。包括它或删除依赖项数组

  React.useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      await axios
        .get(
          "http://localhost:4000/api/instructorcourses/" +
            props.instructor.InstructorID
        )
        .then((res) => {
          setData(res.data);
          setLoading(false);
        });
    };
    loadData();
  }, [props.instructor]);