获取太多重新呈现的Reaction钩子错误(&Q;) [英] Getting a "Too many re-renders" error with React Hooks
本文介绍了获取太多重新呈现的Reaction钩子错误(&Q;)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在和Reaction Hooks作斗争。我在网上看了看,但想不出如何让这些例子适应我的代码。我有以下组件,它会触发";太多重新呈现";错误:
const EmailVerification = () => {
const [showMessage, setShowMessage] = useState(true);
const [text, setText] = useState("...Loading. Do not close.");
const { data, error } = useQuery(VERIFY_EMAIL);
if (error) {setText(genericErrorMessage);}
if (data) {setText(emailVerificationMessage);}
return (
<Wrapper>
<Message setShowMessage={setShowMessage} text={text} />
</Wrapper>
)
}
如何重新组织代码以避免此错误?我知道useEffect挂钩应该用于执行副作用,尽管我不知道在这种情况下如何使用它(假设它是必要的)。
推荐答案
该错误被触发,因为您直接在呈现函数中使用setText
。此函数用于在调用组件后呈现该组件。由于在下一次渲染中,data
和error
仍被设置,因此它再次调用setText
。
关于useEffect
,您是对的。使用useEffect
可以确保setText
函数仅在数据发生更改时调用。在您的示例中,这适用于data
和/或error
变量。
import { useEffect } from 'react';
const EmailVerification = () => {
const [showMessage, setShowMessage] = useState(true);
const [text, setText] = useState("...Loading. Do not close.");
const { data, error } = useQuery(VERIFY_EMAIL);
useEffect(() => {
if (error) setText('message');
if (data) setText('emailVerificationMessage');
}, [error, data]);
return (
<Wrapper>
<Message setShowMessage={setShowMessage} text={text} />
</Wrapper>
)
}
但是,由于您仅使用已有的道具更改text
变量,因此您也只能在JS(X)中执行此操作:
const EmailVerification = () => {
const [showMessage, setShowMessage] = useState(true);
const { isLoading, data, error } = useQuery(VERIFY_EMAIL);
const text = isLoading ? 'Loading... Do not close' : error || !data ? 'Error message' : 'emailVerificationMessage';
return (
<Wrapper>
<Message setShowMessage={setShowMessage} text={text} />
</Wrapper>
)
}
这使用嵌套的三元运算符(而不是扇形运算符),可以用任何其他方法替换。
这篇关于获取太多重新呈现的Reaction钩子错误(&Q;)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文