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

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

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

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

---

我哪里出错了

试试这样的方法：

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

{data.items.map（{id，url，title}）=>(
{title}
)}

或者，如果要使用该函数，请调用它：

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

const Generate=items=>
items.map（{id，url，title}）=>(
{title}
)
;

因此：

{Generate（data.items）}

---

Pass参数是一个好主意，因为它使生成一个纯函数！

在映射对象列表时，您可能需要使用

.map（）

函数，在您的情况下，为什么不尝试类似的方法呢

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

  }

Const Generate=（）=>{
{data.items.map（（e，i）=>(
{e.title}
))}
}

---

这应该对你有用。

看起来你的想法是对的。我首先想到的是，

Generate

是一个函数，但你从来没有调用过它。相反，你有

{Generate}

直接计算函数对象，而不是它返回的值。相反，你可能应该有

{Generate（）}

我建议您通过添加更多的

console.log（）

调用来更多地调试代码。有关调试代码的更多提示，请阅读

我看到的另一个问题是

Generate（）

函数的语法：

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

---

你看到你的“lol”控制台打印了吗？我建议尝试确保你的数据可以被

Generate（）

访问。这可以通过将数据从Generate（）中打印到控制台来完成。它在Generate（）时运行lol消息被调用，但我没有得到新元素。请注意，

Const

是一个语法错误。它应该是

Const

。请确保您在此处发布的内容与您实际使用的内容完全相同。因此，这就是我想要它做的。调用函数不起作用，但直接在中编写它会起作用。知道为什么吗？我认为是因为数据不起作用ed是一个参数…您不需要“{”我的不好。正如我在其他答案中所说的，我以前有过，但由于某种原因在调试时删除了它。控制台日志会被调用，但不会呈现任何内容。当按照@Claudio的建议将其直接写入流时，它会起作用。我在loss@MariusZ我在回答中又添加了一些建议，看看是否有帮助。

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>
  ));
}

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