Question

我试图根据变量 (user_type) 显示不同的菜单。在我刷新页面之前它会产生奇迹，然后当我单击菜单时一切都变空白并且在控制台上出现此错误：

未捕获的错误：React.Children.only 期望接收单个 React 元素子元素。 [...]

这是我的代码示例：

const CustomLayout = (props) => {
    const menu3 = (
        <Menu>
          <Menu.Item key="0">Modifier le profil</Menu.Item>
          <Menu.Item key="1">Gérer les cours</Menu.Item>
          <Menu.Item key="2">
            <a href="">Ajouter des cours</a>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item onClick={props.logout} key="3">
            <a href="/">Se déconnecter</a>
          </Menu.Item>
        </Menu>
      );
      const menu1 = (
        <Menu>
          <Menu.Item onClick={props.logout} key="0">
            <a href="/">Se déconnecter</a>
          </Menu.Item>
          <Menu.Item key="1">
            <a href="">Mes commandes</a>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="3">Mes informations</Menu.Item>
        </Menu>
      );
    
      const menu2 = (
        <Menu>
          <Menu.Item onClick={props.logout} key="0">
            <a href="/">Se déconnecter</a>
          </Menu.Item>
          <Menu.Item key="1">
            <a href="/courseform/">Ajouter un cours</a>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="3">Mes informations</Menu.Item>
        </Menu>
      );
      
      var choix = () => {
        switch (props.user_type) {
          case 2:
            return menu2;
    
          //giver
          case 3:
            return menu3;
          case 1:
            return menu1;
        }
      };
    
      var menu_table = (
        <Dropdown overlay={choix} trigger={["click"]}>
          <a className="ant-dropdown-link">Mon Compte</a>
        </Dropdown>
      );


    return (
   <Layout>
    
    <Menu>
    {props.isAuthenficated ? (
                  <Menu.Item key="3">
                    <UserOutlined />
                    {menu_table}
                  </Menu.Item>
                ) : (
                  <Menu.Item key="3" onClick={openModal}>
                    <UserOutlined />
                    <a>Connexion/Inscription</a>
                  </Menu.Item>
                )}
              </Menu>

</Layout>);};

const mapStateToProps = (state) => ({
  isAuthenficated: state.auth.isAuthenficated,
  user_type: state.auth.user_type,)};

const mapDispatchToProps = (dispatch) => {
  return {
    logout: () => dispatch(actions.logout()),};};

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(CustomLayout)
);

Answer 1

你的jsx错了吗？布局组件可以有子组件吗？可以尝试在返回函数的jsx中的元素fragment中添加一个容器，也去看看menu1-3都需要包起来吗？（原谅我英文不太好，qaq！）

return (
  <fragment>
 <Layout> 
<Menu>
{props.isAuthenficated ? (
              <Menu.Item key="3">
                <UserOutlined />
                {menu_table}
              </Menu.Item>
            ) : (
              <Menu.Item key="3" onClick={openModal}>
                <UserOutlined />
                <a>Connexion/Inscription</a>
              </Menu.Item>
            )}
          </Menu>
    </Layout>
  </fragment>

)

Answer 2

尝试在您的 switch 中添加一个默认情况，如下所示

 var choix = () => {
    switch (props.user_type) {
      case 2:
        return menu2;

      //giver
      case 3:
        return menu3;
      case 1:
        return menu1;
      default:
        return menu1
    }
  };

似乎刷新时 use_type 为空；

刷新页面时出现 React.Children.only 错误

2 个答案: