.map() 仅在有数组时如何使用？答案

【问题标题】：How can i use .map() only when there is an array?.map() 仅在有数组时如何使用？
【发布时间】：2023-03-06 16:10:01
【问题描述】：

我是新来的反应，我正在传递一个项目道具。一些项目在 items.modifiers 中有一个空数组。当我使用 if 条件时，我仍然收到“无法读取未定义的属性‘映射’”的错误，下面是我的代码。任何帮助将不胜感激。

const NewModal = ({ item }) => {
  if (item.modifiers !== "") {
    item.modifiers.map((modifier) => console.log(modifier.cat_name));
  }
};

return [
  {
    items: [
      {
        item_id: 1,
        item_name: "Philadelphia Steak Sandwich",

        modifiers: {
          cat_name: " Choose a side",
          mod_items: [
            { mod_item_name: "French Fries", price: 1 },
            { mod_item_name: "Cole Slaw", price: 2 },
          ],
        },
      },
      {
        item_id: 2,
        item_name: "Philadelphia Steak Sandwich Deluxe",

        modifiers: "",
      },
    ],
  },
];

【问题讨论】：

这能回答你的问题吗？ How to check if an object is an array?
只需检查它是否未定义、具有map 属性/函数的对象还是数组，具体取决于您的应用程序的需要。我不确定对空字符串进行哪些检查将有助于避免。一段可能是空字符串或数组的数据听起来很脆弱。

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

首先使用Array.isArray() 检查您要映射的项目是否为数组类型。

const NewModal = ({item}) => {

    if(Array.isArray(item.modifiers) {
      item.modifiers.map((modifier)=> console.log(modifier.cat_name));
    }
}

【讨论】：

【解决方案2】：

您首先需要确保您的数据是一个数组。然后你可以检查数组是否准备好。

您应该确保数据类型一致，这是给定的。

在等待数据填充时（可能来自 API 调用），您可以使用 null propagation operators / optional chaining 而不是 if-else

然后你可以在点之前用一个问号来调用这样的东西。

const newArray = item?.modifier?.map(item => do something)

这样会抑制未定义的错误。

您需要采取的另一个步骤是条件渲染。

例如

if (!data?.length) return null

//OR

if (!data?.length) return <div>data is loading</div>

【讨论】：

【解决方案3】：

您可以通过检查是否满足每个所需条件然后循环修饰符数组来简单地做到这一点，

item && item.modifiers && item.modifiers.length && item.modifiers.map((modifier)=> console.log(modifier.cat_name))

【讨论】：