儿童和父母组件的异常渲染和重新渲染，引起布局闪烁

Question

我试图为老师的老师制作仪表板，其中将显示老师的细节。我正在使用嵌套路由来显示与老师仪表板相关的组件，因此我也有侧边栏。我在侧栏的布局中面对闪烁，同时从一条路线到另一条路线，我在另一个问题中提到了另一条路线如何阻止sidenav中的闪烁，这是由于使用效率引起的，该效率在每个渲染上获取了一些数据 - reactjs 。因此，我正在使用代码，并进行了一些控制台日志以准确跟踪组件发生的事情，并发现组件的不寻常渲染。我正在在父母的使用效果内进行API调用，并且不知道这是否引起问题。以下是父母和子女的所有代码

dashboard（parent consement）

const TeacherDashboard = () => {
  // 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);

  useEffect(() => {
    // setting the loading tru 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();
  }, []);

  console.log("Rendered Dashboard");

  return (
    <Container>
      <SideBar name={!loading && teacher.name} />

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

sidebar（child consement）

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);

  console.log("The SideBar has rendered");

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

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

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

export default memo(SideBar);

，现在的控制台记录了有关组件的渲染方式

首先是登录 登录后

Rendered Dashboard 
SideBar.js:16 The SideBar has rendered
TeacherDashboard.js:35 use effect called
TeacherDashboard.js:38 Rendered Dashboard 
TeacherDashboard.js:38 Rendered Dashboard 
SideBar.js:16 The SideBar has rendered

单击嵌套路由之一的任何链接

Rendered Dashboard 
SideBar.js:16 The SideBar has rendered
TeacherDashboard.js:35 use effect called
TeacherDashboard.js:38 Rendered Dashboard 
TeacherDashboard.js:38 Rendered Dashboard 
SideBar.js:16 The SideBar has rendered

接下来，在第三次点击上

Rendered Dashboard 
SideBar.js:16 The SideBar has rendered
TeacherDashboard.js:38 Rendered Dashboard 
SideBar.js:16 The SideBar has rendered
TeacherDashboard.js:35 use effect called
TeacherDashboard.js:38 Rendered Dashboard 
TeacherDashboard.js:38 Rendered Dashboard 
SideBar.js:16 The SideBar has rendered

。请帮助我纠正这个不寻常的重新渲染问题，并最终阻止闪烁。我是新手的反应，不明白如何解决

侧栏上的闪烁问题

Answer 1

每当您触发父时使用效果时，都会将加载状态设置为true。这将导致name您发送到侧边栏以在字符串和false/undefined之间切换，这将触发侧边栏中的重新渲染