reactjs 第二次使用下拉导航时出现“超出最大更新深度”错误

efzxgjgh 于 2023-03-17 发布在 React

关注(0)|答案(3)|浏览(130)

我试图重定向到另一个页面时，点击一个下拉列表内的项目，在我的sidenav.我得到重定向到该页面像往常一样，第一次没有任何错误，然而，当我点击同一项目，或另一个从不同的下拉列表再次，它抛出这个错误：
警告：超出了最大更新深度。当组件在useEffect内调用setState，但useEffect没有依赖项数组，或者其中一个依赖项在每次呈现时都发生更改时，可能会发生这种情况。
我创建了一个数组，它将所有必要的信息存储为从另一个组件获取的 prop ，如下所示：
摘自：

<SidenavDropdown
  sidenavButtonName="Service 0.5GB"
  sidenavItemNames={[
    "Console",
    "File Manager",
    "Remote Access",
    "Configuration",
    "Subusers",
  ]}
  sidenavItemLinks={[
    "/console",
    "/files",
    "/remote",
    "/configure",
    "/subusers",
  ]}

指定给我的SidenavDropdown中的行：

const rows = [];
  for (let i = 0; i < props.sidenavItemNames.length; i++) {
    rows.push(
      <DropdownItem
        itemName={props.sidenavItemNames[i]}
        itemLink={props.sidenavItemLinks[i]}
      />
    );
  }

然后，在SidenavDropdown中返回时，我在一个div中返回{rows}：

<div className={`overflow-hidden bg-[#283046] rounded-lg transition-transform ease-in duration-300`}>
     {rows}
  </div>

这也是我的DropdownItem组件：

const DropdownItem = (props) => {
  const [goTo, setGoTo] = useState(false);

  if (goTo) {
    return <Navigate exact to={props.itemLink} />;
  }

  return (
    <div className="...">
      
      <button
        onClick={() => setGoTo(true)}
        className="..."
      >
        {props.itemName}
      </button>
    </div>
  );
};

我假设在我的代码中有一个无限循环，重新呈现组件。我不明白的是为什么按钮本身在被点击时，会在控制台中显示这个错误，并且会完全从DOM中删除，在下拉列表中，什么都不留下。
在这件事上有人能帮助我吗？

reactjs

来源：https://stackoverflow.com/questions/75755763/maximum-update-depth-exceeded-error-when-using-dropdown-navigation-a-second-ti

3条答案

按热度按时间

njthzxwz1#

使用react-router-dom中的useHistory钩子来处理DropdownItem组件中的导航将解决您遇到的“Maximum update depth exceeded”警告。这种方法避免了不必要的重新呈现和潜在的无限循环，这是由之前使用useState和<Navigate>组件的条件呈现的实现所导致的。
下面是DropdownItem组件的外观：

// react-router v4/5
import { useHistory } from "react-router-dom"; 

const DropdownItem = (props) => {
  const history = useHistory();

  const navigateTo = () => {
    history.push(props.itemLink);
  };

  return (
    <div className="...">
      <button onClick={navigateTo} className="...">
        {props.itemName}
      </button>
    </div>
  );
};

LE：适用于useNavigate的代码

// react-router v6
import { useNavigate } from 'react-router-dom';

const DropdownItem = (props) => {
  const navigate = useNavigate();

  const navigateTo = () => {
    navigate(props.itemLink);
  };

  return (
    <div className="...">
      <button onClick={navigateTo} className="...">
        {props.itemName}
      </button>
    </div>
  );
};

赞(0）回复(0）举报 2023-03-17

jobtbby32#

另一种选择是不使用onClick处理程序，而是直接使用react-router Link组件并在其中使用wrap按钮。

赞(0）回复(0）举报 2023-03-17

ffx8fchx3#

我认为您应该稍微重写dropdownItem组件，因为useState在这里没有做任何事情，这可能是错误的原因。

const DropdownItem = (props) => {
  const navigateTo () {
    // call the api of the navigation you use directly
    // return <Navigate exact to={props.itemLink} />;
  }

  return (
    <div className="...">
      
      <button
        onClick={() => navigateTo()}
        className="..."
      >
        {props.itemName}
      </button>
    </div>
  );
};

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 第二次使用下拉导航时出现“超出最大更新深度”错误

3条答案

相关问题

热门标签

最新问答