У React Hook React.useEffect отсутствует зависимость: loadData. Либо включите его, либо удалите массив зависимостей - PullRequest
Новая
       2

У React Hook React.useEffect отсутствует зависимость: loadData. Либо включите его, либо удалите массив зависимостей

0 голосов
/ 05 мая 2020

Я получаю это предупреждение в следующем компоненте в 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>
  );
};

1 Ответ

1 голос
/ 05 мая 2020

Есть 2 возможных решения, которые вы можете реализовать: одно - переместить loadData функцию в useEffect, но вы не сможете получить доступ к этой функции за пределами useEffect области: 

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]);

И другой - обернуть loadData в useCallback и добавить его в зависимости useEffect: 

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