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

Question

我有一个网站正在映射它从 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
预先感谢您的帮助。

Answer 1

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

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

你也可以有其他条件。

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

Array still mapping even with no data

javascript

html

json

reactjs

array.prototype.map