如何使用 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']}>

   {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}which 直接评估函数对象，而不是它返回的内容。相反，您可能应该拥有{Generate()}.

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

我看到的另一个问题是您的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>

  ));

}

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

在胖箭头函数中的语句周围使用花括号时，必须包含return语句才能返回结果。由于该console.log()声明，这是必要的。如果只有一个语句，则可以删除花括号，并且单个语句不需要返回：

const Generate = () =>

    data.items.map(({id, url, title}) => (

        <MenuItem key={id}>

            <Link to={url}> {title} </Link>

        </MenuItem>

));