如何使用JSON数据使用地图动态生成菜单组件？

Question

我正在尝试使用从json提取的数据来动态创建一组菜单项。我目前正在尝试通过用props映射值来做到这一点，但是我在某个地方失败了。

这是我尝试执行此操作的代码：

Const Generate = () => {
  {data.items.map(({id, url, title}) => (
     <MenuItem key={id}> 
      <Link to={url}> {title} </Link> 
     </MenuItem>
))
console.log('lol')}
}

这是尝试使用它的组件。已注释掉，看起来很不错，并且经过硬编码也可以很好地工作。

const Navigation = ({}) => (
  <React.Fragment>
    <Layout>
    <Sider
      breakpoint="xs"
      collapsedWidth="0"
      onBreakpoint={broken => {
      }}
      onCollapse={(collapsed, type) => {
      }}
    >
      <div className="logo">
          <h1 style={{ color: 'white', paddingLeft: 20, paddingTop: 26}}>
              {Generate}
          </h1>
      </div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        {Generate()}
        {/* <Menu.Item key="1">
        <Link to="/" > Hjem </Link>
        </Menu.Item>
        <Menu.Item key="2">
        <Link to="/skjema"> Mine Skjema </Link>
        </Menu.Item>
        <Menu.Item key="3">
        <Link to="/pasient"> Mine Pasienter </Link>
        </Menu.Item>
        <Menu.Item key="4">
            Søk
        </Menu.Item>
        <Menu.Item key="5">
            Filtrer
        </Menu.Item>   */}
      </Menu>
    </Sider>

    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="content">
          <Switch>
            <Route  exact path={"/"} component={Dashboard} />
            <Route  exact path="/Skjema" component={MineSkjema} />
            <Route  exact path="/Pasient" component={MinePasienter} />
          </Switch>
        </div>
      </Content>
      <Footer />
    </Layout>
  </Layout>
  </React.Fragment>
)

export default withRouter(Navigation);

供参考，这是json结构：

const data =
  {
  "items": [
    {
      "id": 1,
      "url": "/",
      "title": "Hjem"
    },
    {
      "id": 2,
      "url": "/Skjema",
      "title": "Mine Skjema"
    },
    {
      "id": 3,  
      "url": "/Pasient",
      "title": "Hjem"
    },
    {
      "id": 4,
      "url": "/Search",
      "title": "Søk"
    }
  ]
  }

我在哪里弄错了？

Answer 1

[在映射对象列表时，您可能想使用.map()函数，并且在您的情况下，为什么不尝试这样的操作？

Const Generate = () => {
  {data.items.map((e,i) => (
    <MenuItem key={i}> 
      <Link to={e.url}> {e.title} </Link> 
    </MenuItem>
   ))}

  }

这应该为您工作。

Answer 2

看来您有正确的主意。我突然想到的第一件事是Generate是一个函数，但是您从不调用它。相反，您有{Generate}直接评估函数对象，而不是返回的对象。相反，您probalby应该具有{Generate()}。

我建议您通过添加更多console.log()调用来更多地调试代码。阅读this article，以获取有关调试代码的更多提示。

Answer 3

尝试这样或

<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
   {data.items.map(({id, url, title}) => (
      <MenuItem key={id}> 
        <Link to={url}> {title} </Link> 
      </MenuItem>
   )}
</Menu>

或者，如果您想使用该功能，请调用它：

const Generate = data =>
  data.items.map(({id, url, title}) => (
     <MenuItem key={id}> 
      <Link to={url}> {title} </Link> 
     </MenuItem>
  )
;

所以：{Generate(data)}