ReactJs报错：Maximum update depth exceeded 解决方案求助

错误原因 #

你遇到的无限更新循环，是因为点击搜索按钮或按下回车后，设置fireNavigate为true触发<Navigate />组件执行路由跳转。如果跳转后的页面仍包含SearchInput组件，该组件会再次渲染并触发<Navigate />，形成无限循环跳转，最终导致更新深度超出限制。

修复步骤 #

1. 用编程式导航替代声明式<Navigate /> #

React Router的useNavigate钩子更适合这种触发式跳转场景，能避免意外的循环渲染：

• 导入useNavigate：

import { useNavigate } from "react-router-dom";

• 在组件内初始化导航实例：

const navigate = useNavigate();

2. 移除fireNavigate相关状态与渲染逻辑 #

不需要通过状态控制跳转，直接在事件中调用导航方法：

// 删除fireNavigate状态定义
// const [fireNavigate, setFireNavigate] = useState(false);

const handleKeyDown = (event) => {
  if (event.key === "Enter") {
    setSearchValue(inputChange);
    navigate("/search");
  }
};

const handleClick = () => {
  setSearchValue(inputChange);
  navigate("/search");
};

3. 优化受控组件逻辑（可选但推荐） #

输入框已是受控组件（绑定value和onChange），直接使用inputChange状态值即可，无需依赖useRef获取内容，避免状态与DOM值不一致的潜在问题：

// 删除ref相关代码
// const inputRef = useRef(null);

// 输入框移除ref属性
<input
  className="search-input"
  onChange={inputChangeHandler}
  value={inputChange}
  type="text"
  onKeyDown={handleKeyDown}
  placeholder={props.placeholder}
/>

完整修复后的代码 #

import "./SearchInput.css";
import Search from "../../../assets/Images/icon/search-normal.svg";
import { useNavigate } from "react-router-dom";
import { React, useState } from "react";
import { useAppContext } from "../../../Context/SearchContext/SearchContext";

const SearchInput = (props) => {
  const [inputChange, setInputChanage] = useState("");
  const navigate = useNavigate();

  const { setSearchValue } = useAppContext();

  const inputChangeHandler = (event) => {
    setInputChanage(event.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      setSearchValue(inputChange);
      navigate("/search");
    }
  };

  const handleClick = () => {
    setSearchValue(inputChange);
    navigate("/search");
  };

  return (
    <div className="search-input-container">
      <input
        className="search-input"
        onChange={inputChangeHandler}
        value={inputChange}
        type="text"
        onKeyDown={handleKeyDown}
        placeholder={props.placeholder}
      />
      <button className="search-icon" onClick={handleClick}>
        <img src={Search} width="100%" height="100%" alt="search icon" />
      </button>
    </div>
  );
};

export default SearchInput;

内容的提问来源于stack exchange，提问作者fateme barzegar