為什么 props.children 在第一次渲染時不渲染？ 我必須刷新頁面，然后 props.children 出現在頁面上

Question

我正在開發第一次訪問時具有角色選擇的網絡應用程序。 例如，在我選擇管理員角色后，它會在localStorage中設置userRole的值。

這是應用程序，您可以看到根據當前角色有不同的路線。

在我選擇了角色之后，我被重定向到“/”路由，我實際上想查看呈現這個路由的組件，在這種情況下是 TableBoard，但我首先得到的是render={() => <Container>its from app.tsx {route.component}</Container>} 。 所以在第一次渲染時，我只能its from app.tsx ，然后我刷新頁面，一切都很好。

如何在這里修復路由？

請詢問是否有不清楚的地方。

function App() {
  const currentRole = useReduxSelector(state => state.auth.currentRole);
  const accessToken = localStorage.getItem('accessToken');
  const role = localStorage.getItem('role');

  const getCurrentRoutes = () => {
    if (role === 'userCollaborator') {
      return AccRoutes;
    } else if (role === 'userAdmin') {
      return AdminRoutes;
    } else if (role === 'userHr') {
      return HRRoutes;
    } else if (role === 'userPartner') {
      return Routes;
    } else {
      return RoutesAuth;
    }
  };
  const routes = getCurrentRoutes();
  let routesComponents;
  if (currentRole && accessToken) {
    routesComponents = routes?.map(route => {
      return (
        <Route
          key={route.name}
          exact
          path={route.path}
          render={() => <Container>its from app.tsx {route.component}</Container>}
        />
      );
    });
  } else {
    routesComponents = routes?.map(route => {
      return (
        <Route
          key={route.name}
          exact
          path={route.path}
          component={route.component}
        />
      );
    });
  }
  return (
    <BrowserRouter>
      <Provider store={store}>{routesComponents}</Provider>
    </BrowserRouter>
  );
}

export default App;

應該為我重定向的路線呈現的組件：

export const TableBoard = () => {
  return (
    <Container>
      <div>here I have a lot of other content so it should be rendered as props.children in Container</div>
    </Container>
  );
};

Components.tsx 的代碼如下所示：

const Container: React.FC<ContainerProps> = ({children}) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Container;

Answer 1

因為localStorage.getItem('role')不會做出反應重新渲染您的組件。 您可以讓提供程序來處理這種情況。

例如：

// RoleProvider.jsx

const RoleContext = React.createContext();

export const useRoleContext = () => {
  return React.useContext(RoleContext)
}

export default function RoleProvider({ children }) {
  const [role, setRole] = React.useState();
  
  React.useEffect(
    () => {
      setRole(localStorage.getItem('role'));
    },
    [setRole]
  )

  const value = React.useMemo(
    () => ({ 
      role, 
      setRole: (role) => {
        localStorage.setItem('role', role);
        setRole(role);
      }
    }),
    [role, setRole]
  );

  return (
    <RoleContext.Provider value={value}>
      {children}
    </RoleContext>
  )
};

然后，您可以將RoleProvider放在那些需要角色值的孩子之上。 並在這些孩子中使用const { role } = useRoleContext() 。 由於角色存儲在 state 中。 每當您通過以下代碼更新角色時，那些使用const { role } = useRoleContext()的孩子將被重新渲染。

const { setRole } = useRoleContext();

// Please put it in a useEffect or handler function
// Or this will cause "Too many rerenders"
setRole('Some Role You Want')