Question

如何防止这个错误？

<块引用>

错误：重新渲染过多。 React 限制渲染次数以防止无限循环
我的代码

import React, { useState, useEffect, useRef } from "react";

const Dropdown = ({ options, selected, onSelectedChange }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const onBodyClick = (event) => {
      if (ref.current.contains(event.target)) {
        return;
      }
      setOpen(false);
    };
    document.body.addEventListener("click", onBodyClick, { capture: true });

    return () => {
      document.body.removeEventListener("click", onBodyClick, {
        capture: true,
      });
    };
  }, []);

我相信唯一导致它重新渲染的是 useEffect 我试图删除它并再次运行应用程序和同样的错误！

Answer 1

我发现问题是您在渲染组件时调用了 setdropDown。所以会出现这个错误。您只需像这样更新：

<button onClick={() => setdropDown(!dropDown)}>

错误：“重新渲染太多。React 限制渲染次数以防止无限循环”

1 个答案: