使用 JavaScript 地图时出现未定义的错误 [重复]答案

【问题标题】：Getting undefined error when using JavaScript map [duplicate]使用 JavaScript 地图时出现未定义的错误 [重复]
【发布时间】：2020-12-19 12:46:36
【问题描述】：

在对象数组上使用映射函数时，我得到“无法读取未定义的属性”。因为此错误仅在使用外部 api fetch 获取数据时发生。如果我对数组进行硬编码并做同样的事情 - 我会得到结果。

这是我的数据：

const ticket= {
  "inventoryId": "2001600236510005688",
  "inventoryItems": [
    {
      "fare": "399.00",
      "passenger": {
        "age": "26",
        "gender": "m",
        "title": "Mr"
      },
      "seatName": "5",
    },
    {
      "fare": "399.00",
      "passenger": {
        "age": "26",
        "title": "Ms",
        "gender": "f",
      },
      "seatName": "6",
    }
  ],
  "serviceCharge": "0.00",
}

所以我的地图功能如下：

     const ticket_data = [ticket.inventoryItems].flat();
     ticket_data.map((o,i) => 
             (
                <View key={i}>
                 <View style={{ flexDirection: 'row' }}>
                     <View style={{  }}>
                          <Text>Name</Text>
                          <Text>Age</Text>
                          <Text>Gender</Text>
                     </View>
                     <View style={{  }}>
                         <Text>{o.passenger.name}</Text>
                         <Text>{o.passenger.age}</Text>
                         <Text>{o.passenger.gender}</Text>
                      </View>
                 </View>
                                    
                 <View style={{  }}>
                       <Text>Seat: {o.seatName}</Text>
                 </View>
                </View>
             )          
       )

因此出现“无法读取未定义的属性‘乘客’”的错误，但是当我对数据进行硬编码并做同样的事情时 - 它显示了输出！如何处理？有时inventoryItems 将是单个对象而不是那个数组，因此需要两者的解决方案

这是 React Native 代码

【问题讨论】：

什么是ticket_data？是data.inventoryItems 还是别的什么？如果ticket_data初始为空，会如何抛出"cannot read property 'passenger' of undefined"错误？
现在检查@adiga
不，我知道异步调用！我的数据列表很长，只是显示了一些出错的数据点！我可以在屏幕上显示其他数据！唯一的问题是上面我的问题（换句话说，在同一个 api 调用中我正在获取多个数据，并且正在使用它来显示但有对象的那个正在遇到问题）@Ivar
[ticket.inventoryItems].flat(); 的目的是什么？目前还不清楚你是如何得到“无法读取未定义的属性'passenger'”。
你能显示ticket的值吗？

标签： javascript arrays react-native

【解决方案1】：

可能在渲染视图时未获取数据。 ticket_data 变量默认值是否设置为 []？

你可以检查inventoryItem是否为数组

Array.isArray(inventoryItems)

【讨论】：

如果ticket_data是[]，会抛出"cannot read property 'passenger' of undefined"错误吗？回调将在0 items 上执行
嗯...是的，你是对的
不，数据已获取（我正在获取我的 api 中的其他数据 - 所以请确保已获取数据！）我认为问题出在嵌套对象

【解决方案2】：

我这样做了：

const ticket_data = ticket.inventoryItems;
  useEffect(() => {
    console.log(ticket_data);
    ticket_data.map((k, v) => {
      console.log(k.passenger.title);
    });
  }, []);

并得到正确的输出：

Mr
Mrs

注意：忽略useEffect部分。它与你的错误无关。已添加相同的屏幕截图

【讨论】：

有什么区别？我已经这样做了！
你正在这样做[ticket.inventoryItems].flat();
试试这个const ticket_data = ticket.inventoryItems;
有时我会将结果作为对象，在这种情况下我无法直接映射，这就是我使用平面的原因
所以首先检查数据是否是一个对象，然后使用平面，否则不要使用平面