使用 React Hooks 出现“太多重新渲染”错误

我在这里遇到了 React 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 and error仍然设置，它调用setText again.

你是对的useEffect. With useEffect你可以确保setText仅当数据发生更改时才调用函数。就你而言，这是为了data and/or 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使用已经存在的 props 的变量，您也可以仅在 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>
  )
}

这使用了嵌套三元运算符（不是扇形），可以用任何其他方法替换。