useState - 错误：重新渲染太多。 React 限制渲染次数以防止无限循环答案

【问题标题】：useState - Error: Too many re-renders. React limits the number of renders to prevent an infinite loopuseState - 错误：重新渲染太多。 React 限制渲染次数以防止无限循环
【发布时间】：2021-10-21 01:03:12
【问题描述】：

我收到了这个无限循环错误。我想根据count 的值改变isDisabled 的状态。如果我想保持状态，我应该如何解决这个问题？

const TheGame = () => { 
  const [count, setCount] = useState(0);
  const [isDisabled, setIsDisabled] = useState(false);

  const onHitHandler = async () => {
    let card = await fetchCard();

    if (card[0].value === 'ACE')
      setCount((prevCount) => prevCount + 11);
    else if (card[0].value === 'JACK' || card[0].value === 'QUEEN') || card[0].value === 'KING')
      setCount((prevCount) => prevCount + 10);
    else
      setCount((prevCount) => prevCount + Number(card[0].value));
  };

  if(count > 21)
    setIsDisabled(true);  // error occures here.

  return(something);
};

【问题讨论】：

count 是如何设置的？欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example，并包含在您的问题中。
在count 上使用useEffect 挂钩。它只会在count 更改时触发，而不会像您当前的示例那样创建无限循环。
我已经编辑了帖子，所以你可以看到我是如何更改count的。

标签： javascript reactjs use-state

【解决方案1】：

试试这个：

useEffect(()=>{
  if(count > 21) {
    setIsDisabled(true); 
  }
}, [count])

【讨论】：

谢谢，帮了大忙！

【解决方案2】：

除了使用 useEffect 之外，另一种方法是意识到这个变量不一定是内在状态，而是可以从内在状态“计算”出来的东西。

例如，您的代码可以说

const TheGame = () => { 
  const [count, setCount] = useState(0);

  const onHitHandler = async () => {
    let card = await fetchCard();

    if (card[0].value === 'ACE')
      setCount((prevCount) => prevCount + 11);
    else if (card[0].value === 'JACK' || card[0].value === 'QUEEN') || card[0].value === 'KING')
      setCount((prevCount) => prevCount + 10);
    else
      setCount((prevCount) => prevCount + Number(card[0].value));
  };

  const disabled = count > 21 ? true : false // or simply const disabled = count>21

  return disabled ? <DisabledState/> : <NonDisabledState/>
};

此外，在前一种情况下失败的原因是您不想在组件的正常“渲染”中使用“setState”类型的回调。那是因为任何时候使用 setState 回调，它都会重新渲染您的组件（以便可以在屏幕上绘制新状态！）

【讨论】：