Могу ли я запомнить функцию установки из контекста React (useContext)

Question

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

useEffect(() => {
    axios.get(myUrl)
        .then(response => {
            setName(response.name);
            setAge(response.age);
        }).catch(error => {
            console.log(error);
        });
}, [myUrl, setName, setAge]);

setName и setAge происходят из контекста следующим образом:

import MyContext from './context';

const MyComponent = props => {
    const {
        setName,
        setAge
    } = useContext(MyContext);

Эта проблема заключается в том, что все функции, массивы и объекты регистрируются как «измененные» зависимости в вызове useEffect, поэтому он заканчивается бесконечным l oop, где происходит выборка этих данных снова и снова и снова. снова. Могу ли я запомнить функцию из контекста, чтобы он знал, что вызовет этот эффект только один раз?

Примечание: Потребитель моего контекста находится на несколько уровней выше этого компонента, поэтому я предполагаю, что там ничего нет Я могу сделать там.

Answer 1

Я думаю, вам нужно определить пользовательский контекст , привязанный к чему-то вроде userId. Это даст вам стабильный идентификатор, который будет меняться только тогда, когда это необходимо.

Answer 2

Нет способа запомнить функцию из контекста.

Тем не менее, вы можете использовать пользовательский хук для useMount, либо импортировав его из react-use библиотеки или просто взглянув на исходный код и объявив его самостоятельно. Ниже показано, как определить useMount и useEffectOnce, а затем использовать useMount в качестве обходного пути:

    const useEffectOnce = (effect) => {
        useEffect(effect, []);
    };

    const useMount = (fn) => {
        useEffectOnce(() => {
            fn();
        });
    };

    useMount(() => {
        axios.get(myUrl)
            .then(response => {
                setName(response.name);
                setAge(response.age);
            }).catch(error => {
                console.log(error);
            });
    });

При таком подходе вам не нужно ничего менять в объявлении контекста, в контексте поставщик или контекстный потребитель.