如何停止由 useEffect 在每次渲染时获取一些数据引起的 SideNav 闪烁 - Reactjs

我有一个父组件，其中包含一个 SideBar 组件和一个渲染父级中嵌套路由组件的组件。 SideBar 有 useEffect 钩子来进行 API 调用来检索一些数据，例如用户的名称，如果用户经过验证，我会使用它在导航顶部显示用户的名称并有条件地呈现按钮。现在，由于嵌套路由，侧边栏每次都会重新呈现。因此，useEffect 钩子每次都会调用 API，这会使布局闪烁，因为从异步函数获取数据需要很短的时间。有什么办法可以阻止这种闪烁吗？下面是代码

侧边栏.js

const SideBar = (props) => {
  // selecting slices for getting user data
  const { authTokens, user } = useSelector((state) => state.login);

  // setting states
  const [teacher, setTeacher] = useState(null); //to store the teacher detail
  const [loading, setLoading] = useState(true);

  const constant = localStorage.getItem("token") ? true : null;

  useEffect(() => {
    // setting the loading true to wait for the data
    setLoading(true);

    /*
    this is the procedure to retrive data from an async api call because we
    cannot directly use async calls so we have to wrap them inside another small function.
    */

    const fectData = async () => {
      //await here is neccessary to wait for the promise to get resolved
      let response = await fetchTeacherDetail(user.user_id);
      setTeacher(response.data);
      setLoading(false);
    };

    fectData();
  }, [constant]);

  const profileButton = (
    <Fragment>
      <NavLink activeclassname="acitve" to="/teacher/profile">
        <i class="fas fa-user"></i>Profile
      </NavLink>
    </Fragment>
  );

  const enterDetails = (
    <Fragment>
      <NavLink activeclassname="acitve" to="/teacher/submit-info">
        <i class="fas fa-pen"></i> Enter Details
      </NavLink>
    </Fragment>
  );

  return (
    <SideNav>
      <UserNameContainer>
        <p>{!loading && teacher.name}</p>
      </UserNameContainer>
      <ButtonContainer>
        <Fragment>
          {!loading && teacher.is_verified ? profileButton : enterDetails}
        </Fragment>
        <NavLink activeclassname="acitve" to="info">
          <i class="fas fa-info-circle"></i> My Information
        </NavLink>
        <NavLink activeclassname="acitve" to="student-requests">
          <i class="fas fa-user-plus"></i> Requests
        </NavLink>
        <NavLink activeclassname="acitve" to="enrolled-student">
          <i class="fas fa-user-graduate"></i> My Students
        </NavLink>
        <NavLink activeclassname="acitve" to="payment">
          <i class="fas fa-rupee-sign"></i> Payments
        </NavLink>
      </ButtonContainer>
    </SideNav>
  );
};

export default SideBar;

仪表板.js

return (
    <Container>
      <SideBar />

      <ContentMainContainer>
        {/* this makes the nested routes display here */}
        <Outlet />
      </ContentMainContainer>
    </Container>
  );

gif 只显示一次闪烁，可能是因为 chrome 捕获，但我单击的所有链接都会发生这种情况。

请建议我避免这种闪烁。

该组件闪烁是因为<p>包含名称的标签正在更改。您可以尝试为其设置高度。最简单的方法是通过内联设置样式，如下所示：

<p style={{minHeight: '1rem'}}>{!loading && teacher.name}</p>

请记住，每次删除或添加某些内容时，它都可能会影响其他所有内容。