获取太多重新呈现的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>
  )
}

这使用嵌套的三元运算符(而不是扇形运算符)，可以用任何其他方法替换。