Как удалить предупреждение "React Hook useEffect имеет отсутствующие зависимости"

ProgramBox

Как удалить предупреждение «React Hook useEffect имеет отсутствующие зависимости»

Post author:admin
Запись опубликована:19 августа, 2022
Post category:Вопросы по программированию

#reactjs #use-effect

#reactjs #использование-эффект

Вопрос:

Вот моя функция компонента:

 function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const getData=async ()=>{
        let roster=new Roster();
        let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
        setRosterList(rosterData);
    }
    useEffect(()=>{
        getData();
        console.log(Object.keys(rosterList));
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

При вызове компонента выдается следующее предупреждающее сообщение:

 Line 14:7:  React Hook useEffect has missing dependencies: 'getData' and 'rosterList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Когда я перемещаю функцию getData в функцию useEffect, она запрашивает:

 React Hook useEffect has missing dependencies: 'props.rosterMonth', 'props.rosterYear', and 'rosterList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Когда я меняю функцию на следующую:

 import { useEffect,useState} from 'react';
import Roster from '../../../utils/roster';

function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const rosterMonth=props.rosterMonth;
    const rosterYear=props.rosterYear;
    useEffect(()=>{
        const getData=async ()=>{
            let roster=new Roster();
            let rosterData=await roster.get(rosterYear,rosterMonth);
            setRosterList(rosterData);
        }
        getData();
        console.log(Object.keys(rosterList));
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

Я получил следующее сообщение:

 React Hook useEffect has missing dependencies: 'rosterList', 'rosterMonth', and 'rosterYear'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

При изменении кода на следующий:

 function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const rosterMonth=props.rosterMonth;
    const rosterYear=props.rosterYear;
    useEffect(()=>{
        const getData=async ()=>{
            let roster=new Roster();
            let rosterData=await roster.get(rosterYear,rosterMonth);
            setRosterList(rosterData);
            console.log(rosterData);
        }
        getData();
    
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

Он выдает следующее сообщение:

 Line 5:12:  'rosterList' is assigned a value but never used                                                                                    no-unused-vars

Line 17:7:  React Hook useEffect has missing dependencies: 'rosterMonth' and 'rosterYear'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Не могли бы вы рассказать мне, как решить проблему?

1. Ошибка не может быть яснее того, что нужно сделать. С какой частью у вас есть проблемы? Массив зависимостей — это пустой массив в конце. Вам нужно поместить вещи, о которых вам сообщает ошибка, внутрь массива.

2. Я новичок в функции компонента REACT, поэтому я просто хочу знать, есть ли какой-нибудь способ удалить предупреждающее сообщение.

3. Команда «console.log (Object.keys (rosterList));» запускается один раз и возвращает правильные данные.

4. useEffect(() => { getData(); console.log(Object.keys(rosterList)); },[getData, rosterList]);

5. это вызывает бесконечный цикл.

Ответ №1:

Проблема console.log(rosterList) внутри эффекта. getData устанавливает состояние rosterList в состояние, но состояние настройки не является синхронным в React.

Это будет работать так, как ожидалось, и не имеет бесконечного цикла и правильно определяет зависимости эффекта:

 function RosterRows(props) {
  const [rosterList, setRosterList] = useState({});

  useEffect(() => {
    const getData = async () => {
      let roster = new Roster();
      let rosterData = await roster.get(props.rosterYear, props.rosterMonth);
      console.log(Object.keys(rosterData));
      setRosterList(rosterData);
    };
    getData();
  }, [props.rosterYear, props.rosterMonth]);

  return (
    <tr>
      <td></td>
    </tr>
  );
}
export default RosterRows;

Ответ №2:

Если вы гарантируете, что ваши перехватчики useEffect будут выполняться только один раз при монтировании компонента, вы можете просто отключить правило eslint

 useEffect(()=>{
    const getData=async ()=>{
        let roster=new Roster();
        let rosterData=await roster.get(rosterYear,rosterMonth);
        setRosterList(rosterData);
    }
    getData();
    console.log(Object.keys(rosterList));
},[]); // eslint-disable-line

1. Eslint существует не просто так. Это ужасный совет.

2. Есть ли какое-либо другое решение?

3. Аааа … итак, я сказал, что вы должны убедиться, что ваш эффект будет выполняться только один раз, или вы должны поместить все переменные, которые использовал эффект, во второй параметр хука

Метки: Как удалить предупреждение «React Hook useEffect имеет отсутствующие зависимости»