如何使用 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"

    },

我在哪里犯错？

Answer 1

尝试这样的事情：<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>&nbsp; &nbsp;{data.items.map(({id, url, title}) => (&nbsp; &nbsp; &nbsp; <MenuItem key={id}>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <Link to={url}> {title} </Link>&nbsp;&nbsp; &nbsp; &nbsp; </MenuItem>&nbsp; &nbsp;)}</Menu>或者，如果您想使用该函数，请调用它：const Generate = items =>&nbsp; items.map(({id, url, title}) => (&nbsp; &nbsp; &nbsp;<MenuItem key={id}>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <Link to={url}> {title} </Link>&nbsp; &nbsp; &nbsp;</MenuItem>&nbsp; );所以： {Generate(data.items)} 传递参数是个好主意，因为它使 Generate 成为一个纯函数！

Answer 2

.map()当您映射对象列表时，您可能想使用函数，在您的情况下，为什么不尝试这样的事情呢？Const Generate = () => {&nbsp; {data.items.map((e,i) => (&nbsp; &nbsp; <MenuItem key={i}>&nbsp;&nbsp; &nbsp; &nbsp; <Link to={e.url}> {e.title} </Link>&nbsp;&nbsp; &nbsp; </MenuItem>&nbsp; &nbsp;))}&nbsp; }这应该对你有用。

Answer 3

看起来你有正确的想法。我首先想到Generate的是一个函数，但你从不调用它。相反，您有{Generate}which 直接评估函数对象，而不是它返回的内容。相反，您可能应该拥有{Generate()}.我建议您通过添加更多console.log()调用来更多地调试您的代码。阅读本文以获取有关调试代码的更多提示。我看到的另一个问题是您的Generate()函数的语法：Const Generate = () => {&nbsp; {data.items.map(({id, url, title}) => (&nbsp; &nbsp; &nbsp;<MenuItem key={id}>&nbsp;&nbsp; &nbsp; &nbsp; <Link to={url}> {title} </Link>&nbsp;&nbsp; &nbsp; &nbsp;</MenuItem>))console.log('lol')}}特别是，我认为你有一些额外的牙套。正确的语法应该是这样的：const Generate = () => {&nbsp; console.log('lol');&nbsp; return data.items.map(({id, url, title}) => (&nbsp; &nbsp; &nbsp;<MenuItem key={id}>&nbsp;&nbsp; &nbsp; &nbsp; <Link to={url}> {title} </Link>&nbsp;&nbsp; &nbsp; &nbsp;</MenuItem>&nbsp; ));}只有一组花括号包围了胖箭头函数的主体。这里的语法是(<params>) => {<statements>}where<params>是参数<statements>列表，是要执行的语句列表。在胖箭头函数中的语句周围使用花括号时，必须包含return语句才能返回结果。由于该console.log()声明，这是必要的。如果只有一个语句，则可以删除花括号，并且单个语句不需要返回：const Generate = () =>&nbsp; &nbsp; data.items.map(({id, url, title}) => (&nbsp; &nbsp; &nbsp; &nbsp; <MenuItem key={id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to={url}> {title} </Link>&nbsp; &nbsp; &nbsp; &nbsp; </MenuItem>));