如何使用 JSON 数据通过 map 动态生成菜单组件？

Question

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

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

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

试试这样的：

<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 = items =>
  items.map(({id, url, title}) => (
     <MenuItem key={id}> 
        <Link to={url}> {title} </Link>
     </MenuItem>
  )
;

所以： {Generate(data.items)} 传递参数是个好主意，因为它使 Generate 成为一个纯函数！

Answer 2

当您映射对象列表时，您可能希望使用.map() 函数，在您的情况下，为什么不尝试这样的事情？

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

  }

这应该对你有用。

Answer 3

看来您的想法是对的。我首先想到的是Generate 是一个函数，但你从不调用它。相反，您有 {Generate} 直接评估函数对象，而不是它返回的内容。相反，您应该有{Generate()}。

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

我看到的另一个问题是 Generate() 函数的语法：

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

特别是，我认为您有一些额外的大括号。正确的语法应该是这样的：

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

1. 只有一组花括号包围了粗箭头函数的主体。这里的语法是(<params>) => {<statements>}，其中<params> 是参数列表，<statements> 是要执行的语句列表。

2. 当在胖箭头函数中的语句周围使用花括号时，您必须包含return 语句才能返回结果。由于console.log() 语句，这是必要的。如果只有一条语句，那么大括号可以去掉，单条语句不需要return：

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