javascript - 鼠标事件在我的功能组件中导致 "Too many re-renders"

Question

我正在尝试使用一个三元组来根据鼠标悬停在元素上来更改我的“titleHover”状态变量。不幸的是，我的代码给了我以下消息“未捕获错误:重新渲染次数过多。React 限制渲染次数以防止无限循环。”

一直在寻找解决方案，但无济于事，尽管我确信需要进行一个非常简单的更正。

 
function Tsection(props) {

  const [titleHover, settitleHover] = useState(false);

  function handledelete() {
    props.onDelete(props.id);
  }

  return (
    <li className="tsection">
      <div onMouseEnter={settitleHover(true)} onMouseLeave={settitleHover(false)} className="sectiontitle">
        {
          props.title > 0 ? 
          props.title :
          <span>Untitled Section {props.id}</span>
        }
        { titleHover ? <i class="far fa-edit"></i> : null }
      </div>
      <i onClick={handledelete} className="far fa-trash-alt deleteimg"></i>
    </li>
  );

}

export default Tsection;

Answer 1

现在，您将在渲染组件时立即调用 settitleHover。您需要传递回调而不是调用它:

<div onMouseEnter={() => settitleHover(true)} onMouseLeave={() => settitleHover(false)} className="sectiontitle">