英文:
useMemo causes hook to continuously fire infinitely
问题
我有一个自定义的React Hook，用于从子图端点查询数据。它简单地返回一个对象数组。
const useAllLPTokens = (): GraphQLResponse<LPTokens> => {
const [status, setStatus] = useState<number>(0);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<any>();
const [response, setResponse] = useState<any>();
const [payload, setPayload] = useState<LPTokens | undefined>();
const getLPTokenData = async () => {
setLoading(true);
try {
const res = await axios.post(subgraphEndpoint,
{
headers: { "Content-Type": "application/json" },
query: graphQuery
}
);
setStatus(res.status);
setResponse(res);
setPayload(res.data);
} catch (error) {
setError(error);
}
setLoading(false);
}
useMemo(() => {
getLPTokenData();
}, [])
return { status, loading, error, response, payload };
}
使用该Hook的组件：
const Dashboard: React.FC = () => {
const { account } = useActiveWeb3React();
const { status: status1, loading: loading1, error: error1, response: response1, payload: payload1 } = useAllLPTokens();
console.log(payload1);
// ...
}
我不确定为什么在Hook中使用useMemo时，当我检查浏览器控制台时，它会无限触发。但当我使用useEffect时，它不会无限触发。我没有为useMemo指定任何依赖项，我假设它只会在调用时触发一次。这是什么原因呢？
（请注意，我已经去除了代码部分，只返回翻译好的内容，如您所要求。）
英文:
I have a custom react hook that I wrote to query data from a subgraph endpoint. It simply returns an array of objects.
const useAllLPTokens = (): GraphQLResponse<LPTokens> => {
const [status, setStatus] = useState<number>(0);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<any>();
const [response, setResponse] = useState<any>();
const [payload, setPayload] = useState<LPTokens | undefined>();
const getLPTokenData = async () => {
setLoading(true);
try {
const res = await axios.post(subgraphEndpoint,
{
headers: { "Content-Type": "application/json" },
query: graphQuery
}
);
setStatus(res.status);
setResponse(res)
setPayload(res.data)
} catch (error) {
setError(error)
}
setLoading(false);
}
useMemo(() => {
getLPTokenData();
}, [])
return { status, loading, error, response, payload }
}
Component where it is used:
const Dashboard: React.FC = () => {
const { account } = useActiveWeb3React();
const { status: status1, loading: loading1, error: error1, response: response1, payload: payload1 } = useAllLPTokens();
console.log(payload1);
...
I'm not sure why when I use useMemo in the hook, it fires endlessly when I check the browser console. However when I use useEffect it doesn't. I didnt include any dependency for useMemo and I assumed it will only fire once when it is called. What is the reason for this?
答案1
得分: 2
使用useMemo()而没有依赖数组将在每次渲染时计算该值。
请参考此链接：
https://reactjs.org/docs/hooks-reference.html#usememo
如果没有提供数组，将在每次渲染时计算新值。
英文:
Using useMemo() without the dependencies array will calculate the value on every render.
See this link for reference
https://reactjs.org/docs/hooks-reference.html#usememo
> If no array is provided, a new value will be computed on every render.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论