Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.3k views
in Technique[技术] by (71.8m points)

ReactJS: Too many re-renders in function

I am trying to make a small function, which makes a likable Button. My function should work, but the error I get is too many re-renders (even tough the setState only gets called onClick) Code below:

    function ClickMeToLike(){
  const [isLiked, setIsLiked] = useState(false);

  return (
    <Col><p>
    {
    isLiked ?
    <Icon.Heart onClick={setIsLiked(true)}/> :
    <Icon.HeartFill onClick={setIsLiked(false)}/>
    }
    </p></Col>
  )
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

you need to use an arrow function in your onClick

try this

onClick = {() => setIsLiked(true)}

best practice is to use what the answer above me is though and define a separate function to handle your clicks


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...