reactjs React菜单错误-应为赋值或函数调用，但看到的是表达式

esbemjvw 于 2023-03-12 发布在 React

关注(0)|答案(3)|浏览(171)

我是React的新成员所以请原谅我。
我正在尝试构建一个侧边菜单导航。这是应用程序的开始，所以我将在未来添加更多的导航标题。为了将来的证明，我正在尝试将项目标签的键/标签存储在一个数组中。在React渲染中，我正在尝试迭代数组并相应地插入键/标签。然而，我遇到了下面的错误。第41行对应于key: menuItem["key"];。
为什么会看到此错误以及如何修复它？
Line 41:11: Expected an assignment or function call and instead saw an expression

import '../../src/index.css';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const menuItems = [
      {
          key: "nav1",
          label: "Nav 1"
      },
      {
          key: "nav2",
          label: "Nav 2"
      }
  ]

  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={(broken) => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          items={menuItems.forEach((menuItem) => {
              key: menuItem["key"];
              label: menuItem["label"];
              })
          }
        />
      </Sider>
    </Layout>
  );
};

export default App;

reactjs

来源：https://stackoverflow.com/questions/75665785/error-with-react-menu-expected-an-assignment-or-function-call-and-instead-saw

3条答案

按热度按时间

bbuxkriu1#

你的代码有两个问题。
第一个是语法错误，这是由JavaScript中的{ }同时作为函数体语法和对象语法引起的。
在箭头函数() => {}的上下文中，{ }意味着你要打开函数体，这意味着你必须从函数体开始return，而不是隐式的（没有函数体）。
要纠正这一点，只需将函数体用括号括起来，这样它就可以将其视为隐式返回，而将{ }视为对象：

(menuItem) => ({
  key: menuItem["key"];
  label: menuItem["label"];
})

第二个问题是forEach不接受返回值，您需要使用map。

items={menuItems.map((menuItem) => ({
  key: menuItem["key"];
  label: menuItem["label"];
}))}

注解

除非你的代码为了这个问题而被简化了，否则你的循环是完全不必要的，你只是将对象Map到具有相同值的新对象中。
如果情况确实如此，您可以从代码中完全删除它，只执行items={menuItems}。

赞(0）回复(0）举报 2023-03-12

f87krz0w2#

我认为问题是你在菜单组件内部循环。试试这个解决方案。

{menuItems.forEach(menuItem => {
    <Menu
      theme="dark"
      mode="inline"
      items={{
        key: menuItem.key,
        label: menuItem.label
      }}
    />
  })}

赞(0）回复(0）举报 2023-03-12

u5rb5r593#

试试这边

<Menu
   theme="dark"
   mode="inline"
   items={menuItems.forEach((menuItem) => {
     key={menuItem.key};
     label={menuItem.label};
    })
   }
 />

当你执行foreach时，它会遍历每个对象“{}”，要访问遍历对象的数组，你可以使用像“menuItem.key”这样的点，在React中，你可以像这样放置它“{menuItem.key}"。
如果我有一个这样的数组

const menuItems = [ // array open
  { // object open
      key: "nav1",
      label: "Nav 1"
  }, // object close
  { // another object open
      key: "nav2",
      label: "Nav 2"
  } // another object close
  ]  // array close

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs React菜单错误-应为赋值或函数调用，但看到的是表达式

3条答案

注解

相关问题

热门标签

最新问答