当我传递更新道具时，为什么钩子会在无限循环中开火

Question

我创建了一个自定义挂钩，用于发出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];
}

我做错了什么？

Answer 1

所以我不是反应方面的专家，但这是我的2美分。我认为每次更新http请求中的"数据"时，您的父组件都依赖于它并重新呈现。当父级重新呈现时，它们的对象/子组件将再次初始化，并再次调用useBrokerFetch。在这种情况下，"数据"或"动作"可能仍然具有相同的值，但对于useEffect来说，"是否等于"所提供的道具很重要。由于父对象已重新渲染，因此它们不相同。请记住，JS中的函数也会发生变化。我向你推荐使用回叫钩。使用useCallback((，您基本上可以缓存一个值，然后将其作为道具提供给useBrokerFetch((。当您的父级重新渲染道具时，动作和数据保持不变，不应再次调用useEffect。如果使用类似于useEffect的useCallback，请查看文档。