映射数组时如何忽略空值/未定义值？ [复制]

Question

我该如何实现？

我想通过计划数组进行映射，并为每个项目呈现一个列表。虽然这是有效的，但如果我们在标题上有 null 或 undefined，我们仍然有 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

只需添加一个条件语句就可以了：

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

Answer 2

在呈现列表项之前检查该计划是否具有标题属性:)

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