React导航栏标签无限循环滚动、map函数多次重渲染问题求助

1. 无限重渲染问题 #

useEffect未传入第二个依赖数组参数时，会在每次组件渲染完成后重复执行：组件渲染→触发fetch请求→setdata更新状态→触发重渲染形成死循环，是map函数多次触发重渲染的核心原因。
修复方式：给useEffect添加空依赖数组，仅在组件首次挂载时执行一次请求，同时添加卸载判断避免内存泄漏、错误捕获处理异常：

useEffect(() => {
  let mountedFlag = true;
  fetch("/tags", {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (mountedFlag) setdata(data);
    })
    .catch(err => console.error('标签数据请求失败：', err));
  return () => {
    mountedFlag = false;
  };
}, []); // 空依赖数组仅触发一次执行

2. 标签循环移位问题 #

map渲染列表时未给每一项添加唯一key属性，React虚拟DOM diff算法无法正确识别列表项的身份，更新时会出现顺序错乱、移位的异常表现。
修复方式：给map返回的li元素添加唯一key值，直接使用已有的cats._id作为key即可：

{data.map((cats) => {
  return (
    <li className="nav-item cats" key={cats._id}>
      <NavLink className="nav-link" to={`/c/?cat=${cats._id}`}>
        {cats._id}
      </NavLink>
    </li>
  );
})}

后端代码验证 #

后端的聚合查询逻辑按标签计数倒序排序，只要数据没有更新，返回的标签顺序是固定的，无需修改。

内容的提问来源于stack exchange，提问作者Prateek Nandle