Ловушки React предупреждают меня о недостающих зависимостях - PullRequest
Новая
       1

Ловушки React предупреждают меня о недостающих зависимостях

2 голосов
/ 01 июня 2019

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

function myComponent(props) {
    const { fetchSomething } = props;
    ...
    ...
    useEffect(() => {
        fetchSomething();
    }, []);
    ...
    ...
}

Мой линтер предупреждает меня о том, что "React Hook useCallback имеет отсутствующие зависимости".Он хочет, чтобы я поместил fetchSomething внутри массива зависимостей.
Проблема в том, что даже это fetchSomething будет изменено, я не хочу, чтобы компонент повторно получал данные.И, как я понимаю, в большинстве ситуаций, когда useEffect использует функцию, на самом деле все равно, будет ли функция изменена.
Я не хочу отключать это предупреждение и не люблю распространять // eslint-disable-next-line react-hooks/exhaustive-deps во всем моем коде.
Что является рациональным за такое поведение?
Это заставляет меня чувствовать себя неуверенно при использовании хуков, как будто я делаю что-то неправильно.

Ответы [ 3 ]

1 голос
/ 02 июня 2019

Вы можете использовать useRef или useMemo для сохранения значения.

См. https://stackoverflow.com/a/54963730/9351632

1 голос
/ 02 июня 2019

Вы можете использовать useRef ловушку, чтобы запомнить значение props.fetchSomething при первом рендеринге. Это решит вашу проблему с eslint

function myComponent(props) {
    const fetchSomethingRef = useRef(props.fetchSomething);

    useEffect(() => {
        fetchSomethingRef.current();
    }, []);
}

Хук useRef () предназначен не только для ссылок DOM. Объект «ref» - ​​это универсальный контейнер, текущее свойство которого является изменяемым и может содержать любое значение, подобное свойству экземпляра в классе. более

0 голосов
/ 02 июня 2019

Я согласен с вами, что useRef - хакерское решение, которое добавляет ненужную сложность. Честно говоря, лучшее решение, которое я нашел, - это использование условного внутри useEffect () 

function myComponent(props) {
    const { fetchSomething } = props;
    const [fetched, setFetched] = useState(false)
    ...
    ...
    useEffect(() => {
       if(!fetched) {
        fetchSomething();
        setFetched(true)
       }
    }, [fetched, fetchSomething]);
    ...
    ...
}

правильное использование ловушки useEffect - очень сложная тема. Вы можете прочитать эту очень длинную статью об этом

https://overreacted.io/a-complete-guide-to-useeffect/

useEffect все еще является довольно новым, поэтому все еще существуют конкурирующие передовые практики. Я бы не рекомендовал использовать Ref tho.

...