.map函数在页面上多次重新渲染[重复]答案

【问题标题】：.map function re-rendering many times on page [duplicate].map函数在页面上多次重新渲染[重复]
【发布时间】：2021-10-31 09:03:54
【问题描述】：

问题：在导航栏上，标签应该出现然后保留，但是当我运行代码时，它会不断地从第一个到最后一个移动，比如第一个标签到第二个，第二个到第三个，循环继续永远不会停止。

前端代码（此代码已在返回函数中）：

const Navbar = () => {
  useEffect(() => {
    fetch("/tags", {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setdata(data);
      });
  });

  return (
    <>
      <div className="bg-1">
        <nav className="navbar navbar-expand-lg navbar-dark">
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div
            className="collapse navbar-collapse "
            id="navbarSupportedContent"
          >
            <ul className="navbar-nav ml-auto">
              {data.map((cats) => {
                return (
                  <li className="nav-item cats">
                    <NavLink className="nav-link" to="/c/post">
                      {cats._id}
                    </NavLink>
                  </li>
                );
              })}
            </ul>
          </div>
        </nav>
      </div>
    </>
  );
};

export default Navbar;
//Link to={`/c/?cat=${cats._id}`}

后端代码：

router.get('/tags', async (req, res) => {
  try {
    const categories = await Post.aggregate([
      { $project: { categories: 1 } },
      { $unwind: '$categories' },
      { $group: { _id: '$categories', count: { $sum: 1 } } },
      { $sort: { count: -1 } }
    ]);
    res.json(categories);
  } catch (error) {
    console.log(error);
  }
});

【问题讨论】：

你在哪里使用了这个{data.map ....}？添加这个组件。另外，你的API调用/tags的结果是什么，将成功的结果添加到问题中。
我看不到任何与 API 调用相关的代码，通过查看代码我可以理解问题所在。尝试添加API调用块@Prateek Nandle
useEffect 在每次渲染时都运行没有依赖数组，您应该添加一个空的依赖数组来触发useEffect 一次
您忘记为 useEffect 挂钩添加依赖项数组，因此在每次重新渲染时，您的 API 都会被调用，从而导致无限 API 调用。看看上面有完全相同问题的链接
谢谢@nima 我忘记在useffect中添加[]

标签： reactjs mongodb express frontend mern

【解决方案1】：

所以据我了解，您正在设置数据 setData()，它基本上是返回此导航栏的父组件的状态。

所以现在每次调用导航栏挂载效果时，都会再次调用 setData 更新父状态并重新渲染父级，因此再次重新渲染导航栏并继续循环。

解决方案：将状态向上移动到父级并将其传递给 navbar，因此 navbar 需要一个 tag prop，然后才会渲染它。

【讨论】：