Javascript 如何在主函数中返回常量或函数

我想用react组件创建一个页面

为此，我想将代码分成几个部分

我想在我的布局函数中创建一个使用各种组件（如MenuComponent）的页面

但是，我不知道如何在布局中恢复MenuComponent

谢谢你的帮助

  function Menu () {
  const [menuItems, setItems] = useState(null);

  useEffect(() => {
    getMenuItems().then(setItems);
  }, []);

  if (!menuItems) {
    return null;
  }

  return (
      <div>

        {menuItems.data.root.children.map(menu => {
          return (
              <TreeItem key={menu.id} nodeId="1" label={menu.text} labelIcon={Label}>

                {menu.children.map(child => {
                    return (
                    <TreeItem key={child.id} nodeId="1" label={child.text} labelIcon={Label}>
                      {console.log(child.text)}
                    </TreeItem>

                    );
                  })}
              </TreeItem>
          );
        })}
      </div>
  );
}

export default function Layout() {
  const classes = useStyles();

  if (!isLogged()) {
    return (
      <div className="fondLogin" fullscreen>
        <SnackbarProvider
          maxSnack={1}
          anchorOrigin={{
            vertical: "top",
            horizontal: "center"
          }}
        >
          <Login onSuccess />
        </SnackbarProvider>
      </div>
    );
  }

  return (
    <div className="containerGeneral">
      <InactivityManager />
      <Menu />
    </div>
  );
}

---

菜单组件错误。您需要在useEffect或componentDidMount方法中获取数据。

Satif完全正确，如果您使用的是挂钩方法，那么您应该对useEffect挂钩进行异步调用

另外，组件应该总是返回一些东西。如果要防止渲染，只需返回null。在您的情况下，返回的是未定义的

---

菜单常量没有渲染组件；签出此伙伴可能将默认状态定义为空数组会更好？它只是一个展示。它取决于菜单项类型。在这里，我看到它是一个带有一些键的对象。您可以将默认状态定义为空对象，并选中object.keysdefaultState.length==0。没什么大不了的。哦，我现在明白了。当我第一次看代码的时候，我以为它是一个数组。我不能添加我的子菜单，我添加了一个返回：menu.children.mapchild=>{return我不明白。你能再解释一下吗？

function Menu () {
  const [menuItems, setItems] = useState(null);

  useEffect(() => {
    getMenuItems().then(setItems);
  }, []);

  if (!menuItems) {
    return null;
  }

  return (
    <div>
        {menuItems.children.map(menu => {
            return (
                <TreeItem key={menu.id} nodeId="1" label={menu.text} labelIcon={Label}>

                </TreeItem>
            );
        })};
    </div>

  );
}