Javascript 当我传递更新道具时，为什么钩子会在一个无限循环中发射自己？

我已经创建了一个定制的钩子来发出HTTP请求。但问题是它在无限循环中发出请求。我不明白这是为什么。如果

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

导出默认函数useBrokerFetch（fetchConfig:{[key:string]：any}，action:brokerractions）：[T，boolean]{
const[data，setData]=useState（null为T）；
const[loading，setLoading]=useState（true）；
const brokerdendpoint=process.env.REACT\u APP\u APIBROKER\u ENDPOINT；
异步函数fetchUrl（）{
试一试{
const{data}=等待BrokerHttpRequest（新请求（brokerEndPoint{
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
方法：“张贴”，
正文：JSON.stringify({
“数据”：fetchConfig，
“签名”：BrokerServiceProviders.WMS，
“行动”：行动
})
}));
如果（数据）{
setData（数据）；
设置加载（假）；
}否则{
/**
*与代理的请求失败或代理失败
*未返回任何数据。无论是哪种情况，请设置
*代理数据未定义并更新加载
*状态为“未加载”
*/
setData（未定义为T）；
设置加载（假）；
}
}捕捉（错误）{
setData（未定义为T）；
设置加载（假）；
}
}
useffect（（）=>{
fetchUrl（）；
}，[fetchConfig，action]）；
返回[数据，加载]；
}

---

我做错了什么？

所以我不是react方面的专家，但这是我的2美分。我认为每次您更新http请求中的“数据”时，您的父组件都依赖于它来重新呈现。当父对象重新渲染其对象/子组件时，将再次初始化并再次调用useBrokerFetch。 在这种情况下，“数据”或“动作”可能仍然具有相同的值，但对于useEffect来说，如果“数据”或“动作”与提供的道具相等，则很重要。由于父级已重新渲染，因此它们不相同。请记住，JS中的函数也是可以更改的。

---

我向你推荐useCallback Hook。使用useCallback（）基本上可以缓存一个值，然后作为道具提供给useBrokerFetch（）。当您的父级重新呈现道具动作和数据时，将保持相等，并且不应再次调用useEffect。您使用的useCallback与useEffect类似，请查看文档。

自定义挂钩如何命名

useBrokerFetch

？如果在参数之一

fetchConfig

或

action

中传递新对象，则将调用函数

fetchUrl

infinitely@OlivierBoiss我调用函数时传递一个新对象。有没有办法在我每次打电话的时候就开枪？因为它是一个HTTP钩子在进行HTTP调用，所以我希望每次调用时都会触发它。如果每次调用钩子时都触发HTTP请求，则会得到一个无限循环。HTTP调用更新状态变量（

数据

和

加载

），因此组件将重新呈现，当组件重新呈现时，它将调用钩子，钩子将触发HTTP调用，该调用将更新状态变量，从而触发重新呈现。。。你看到无限循环了吗？我认为你应该在每次调用钩子时传递一个新对象，否则你将得到一个无穷大的值loop@OlivierBoiss我确实得到了一个无限循环。你能用一个小例子来说明我如何做到这一点吗？当你调用你的自定义钩子时，你只需要不为

fetchConfig

传递一个新的对象，也许useMemo会帮你