如何忽略空/未定义的值映射在数组上?

Question

如何实现?

我想映射计划数组，并为每个项目呈现一个列表。虽然这是工作，在情况下，如果我们有null或未定义的标题，我们仍然有4个Li标签渲染，其中第二个没有任何内容。但我怎么能实现这一点，如果标题是空/未定义的对象被忽略，并移动到下一个对象和渲染数组的其余部分。

希望我的解释清楚。

import React from "react";

const App = (props) => {
const plans = [
{
title: "Starter",
plan: "plan_0",
},
{ title: undefined,
plan: "plan_1A",
},
{
title: "Classic",
plan: "plan_2A",
},
{
title: "Premium",
plan: "plan_3A",
},
];

return (
<div>
<h1>Notes</h1>

<ul>
{plans.map((plan, i) =>
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
)}
</ul>
</div>
);
};
export default App;

现在的渲染是这样的:

起动器

经典

溢价

<li>Starter</li>
<li></li>
<li>Classic</li>
<li>Premium</li>

Answer 1

在显示列表项之前检查计划是否有title属性:)

<ul>
{plans.map(
(plan, i) =>
plan.title && (
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
)
)}
</ul>

Answer 2

只需添加条件语句即可:

{plans.map((plan, i) =>
{ plan.title &&
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
}
)}