尝试基于地图生成列表但无法这样做 - 反应

Question

<ul className="nav nav-treeview">
<li className="nav-item">
<a href="#" className="nav-link">
<i className="far fa-circle nav-icon"></i>
<p>hi</p>
</a>
</li>
</ul>

上面的片段给了我"嗨">

{
[e].map((x, y) => {
let arr = Object.keys(x).map(k => x[k]);
arr[0].map((m, n) => {
console.log("value from inner map", m.moduleName);
return (
<ul className="nav nav-treeview">
<li className="nav-item">
<a href="#" className="nav-link">
<i className="far fa-circle nav-icon" />
<p>hi</p>
</a>
</li>
</ul>
);
});
});
}

当我控制台日志记录时，我从m.moduleName获取值，但是，我无法看到应该生成的列表。

<ul className="nav nav-treeview">
<li className="nav-item">
<a href="#" className="nav-link">
<i className="far fa-circle nav-icon" />
<p>hi</p>
</a>
</li>
</ul>;

当我在地图之后再次运行相同的代码时，它也工作正常。

我想根据arr[0]的长度生成列表。任何帮助不胜感激

Answer 1

您需要向封闭箭头函数添加 return 语句

{ [e].map((x, y) => {
let arr = Object.keys(x).map(k => x[k]);
return arr[0].map((m, n) => {
console.log("value from inner map", m.moduleName);
return (
<ul className="nav nav-treeview">
<li className="nav-item">
<a href="#" className="nav-link">
<i className="far fa-circle nav-icon" />
<p>hi</p>
</a>
</li>
</ul>
);
});
});
}