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

Question

我在这里遇到了 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 挂钩应该用于执行副作用，尽管我不知道在这种情况下如何使用它（假设有必要）。

Answer 1

触发错误是因为您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使用现有的 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>
  )
}

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