即使没有数据，数组仍然映射答案

【问题标题】：Array still mapping even with no data即使没有数据，数组仍然映射
【发布时间】：2021-02-02 21:11:39
【问题描述】：

我有一个网站正在映射它从 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>
        ))}

这是按预期工作的。但是，当 JSON 数据为空时，就会出现问题。

"litter4": [
    {
      "name": "",
      "description": "",
      "image": ""
    },
    {
      "name": "",
      "description": "",
      "image": ""
    },

理想情况下，我希望我的客户能够拥有这些已经格式化的代码片段，她可以在必要时填写，并在不需要时留空。问题是当数据不存在时，页面仍然会映射图像。未提供数据时如何防止这种情况发生？
这是可能的，还是有其他方法可以做到这一点？ Link to github repo
提前感谢您的帮助。

【问题讨论】：

你在使用图书馆吗？这似乎不是纯 JavaScript：Uncaught SyntaxError: Unexpected token '<'。请在标签中包含库。
对不起，我忘了，这是反应。
如果你不打算使用结果数组，那么使用.map() 是没有意义的；请改用.forEach()。

标签： javascript html json reactjs array.prototype.map

【解决方案1】：

您可以在映射之前简单地对数组进行过滤

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

你也可以有其他条件。

【讨论】：