Javascript 即使没有数据，数组仍在映射

我有一个网站，它从一个JSON文件映射显示的产品。JSON看起来像这样

"litter3": [
    {
      "name": "Bates",
      "description": "Cute",
      "image": "./puppies/boo/bates.jpg"
    },
    {
      "name": "Blade",
      "description": "This one is fiesty",
      "image": "./puppies/boo/blade.jpg"
    },
    {
      "name": "Blair",
      "description": "Cute",
      "image": "./puppies/boo/blair.jpg"
    },

等等。 页面以以下方式映射：

{litter1.map((litter1) => (
          <div className="col-sm-4" key={litter1.name}>
            <img
              className="homecard frame"
              src={litter1.image}
              alt={litter1.name}
            />
            <h1 className="puppyname">{litter1.name}</h1>

            <p className="puppysubtitle">{litter1.description}</p>
          </div>
        ))}

理想情况下，我希望我的客户能够拥有这些已经格式化的代码片段，她可以在必要时填写，在不必要时保留空白。 问题是当数据不存在时，页面仍将映射图像。 如果没有提供数据，我如何防止这种情况发生？
这是可能的，还是有其他方法来实现这一点？

---

提前感谢您的帮助。

您只需在进行映射之前对阵列进行筛选即可

litter1.filter(x=>x.title!=='').map((litter1) => (

---

您还可以有其他条件。

您只需在进行映射之前对数组进行筛选即可

litter1.filter(x=>x.title!=='').map((litter1) => (

---

您还可以有其他条件。

您正在使用库吗？这似乎不是纯JavaScript：

Uncaught SyntaxError:Unexpected token'对不起，我忘了，这是react。如果不打算使用结果数组，那么使用
.map（）
是没有意义的；改为使用
.forEach（）
。您正在使用库吗？这似乎不是纯JavaScript：
Uncaught SyntaxError:Unexpected token'对不起，我忘了，这是react。如果不打算使用结果数组，那么使用
.map（）
是没有意义的；改用
.forEach（）
。