useState - Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

我遇到了这个无限循环错误。我想根据 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);
};

Answer 1

试试这个：

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

Answer 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 回调，它都会重新渲染您的组件（以便可以在屏幕上绘制新状态！）

useState - Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

useState - Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

javascript

reactjs

use-state