React：如何仅显示使用 Array.map() 将布尔值设置为 false 的位置？ [复制]答案

【问题标题】：React: How can I show only where a boolean is set to false with Array.map()? [duplicate]React：如何仅显示使用 Array.map() 将布尔值设置为 false 的位置？ [复制]
【发布时间】：2020-05-22 05:58:36
【问题描述】：

我有一个简单的对象数组，这些对象包含一个布尔值。

这样渲染时，它会显示每个对象。

{props.items.map((item, index) => {
  <p key={index}>{item.name}</p>;
})}

有问题的数组：

items = [
  {
    "name": "A",
    "hidden": false
  },
  {
    "name": "B",
    "hidden": false
  },
  {
    "name": "C",
    "hidden": true
  },
]

是否可以仅将具有“隐藏”值的对象渲染为 false？

【问题讨论】：

映射前不需要使用filter。只需像这样使用&&：props.items.map((item, index) => !item.hidden && <p key={index}>{item.name}</p>)

标签： javascript reactjs babeljs

【解决方案1】：

你必须使用过滤器

items.filter(i => i.hidden === false);

【讨论】：

或更短的items.filter(({ hidden }) => !hidden)

【解决方案2】：

您需要先过滤数组以获取带有hidden: false 的项目，然后您可以在该结果数组上应用map() 以获取为它们呈现的HTML。

{props.items.filter((item) => !item.hidden).map((item, index) => {
  <p key={index}>{item.name}</p>;
})}

【讨论】：