Почему крюк срабатывает сам по себе в бесконечном l oop, когда я передаю реквизиты обновления?

Question

Я создал пользовательский хук, который делает HTTP-запрос. Но проблема в том, что он делает запросы в бесконечном l oop. Я не могу понять причину этого. Я хочу, чтобы запрос сработал, если в fetchConfig или action

 export default function useBrokerFetch<T>(fetchConfig: { [key: string]: any }, action: BrokerActions): [T, boolean] {

    const [data, setData] = useState(null as T);
    const [loading, setLoading] = useState(true);
    const brokerEndPoint = process.env.REACT_APP_APIBROKER_ENDPOINT;

    async function fetchUrl() {
        try {

            const {data} = await BrokerHttpRequest(new Request(brokerEndPoint, {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                },
                method: "POST",
                body: JSON.stringify({
                    "data": fetchConfig,
                    "signature": BrokerServiceProviders.WMS,
                    "action": action
                })
            }));
            if (data) {
                setData(data);
                setLoading(false);
            } else {
                /**
                 * The request with the broker failed or the broker
                 * did not return any data. In either case, set the
                 * broker data to undefined and update the loading
                 * state to "not-loading"
                 */
                setData(undefined as T);
                setLoading(false);
            }
        } catch (err) {
            setData(undefined as T);
            setLoading(false);
        }
    }

    useEffect(() => {
        fetchUrl();
    }, [fetchConfig, action]);


    return [data, loading];
}

есть изменение. Что я делаю неправильно?

Answer 1

Так что я не эксперт по реакции, но вот мои 2 цента. Я думаю, что каждый раз, когда вы обновляете «данные» в своем http-запросе, ваш родительский компонент зависит от того, будет ли он повторно отображаться. Когда родительский объект повторно выполняет рендеринг, его объекты / дочерние компоненты снова инициализируются и снова вызывается useBrokerFetch. В этом случае «данные» или «действия» могут по-прежнему иметь одно и то же значение, но для useEffect это имеет значение, если «равно» предоставленным реквизитам. Так как родительский рендеринг переставлен, они не совпадают. Пожалуйста, имейте в виду, что также необходимо изменить функции в JS Я рекомендую вам использовать Call-Hook. С помощью useCallback () вы можете в основном кэшировать значение, которое вы затем предоставляете в качестве реквизита для использованияBrokerFetch (). Когда ваш родитель повторно отображает действие реквизита и данные остаются равными, и useEffect больше не следует вызывать. Вы используете useCallback, аналогичный useEffect, посмотрите документы.