TypeError: undefined is not an object , item is from an array from an API

Posted 2023-02-22

【中文标题】TypeError: undefined is not an object , item is from an array from an API

【英文标题】：

【发布时间】：2019-03-11 22:12:28

【问题描述】：

export default class LaunchingScreen extends React.Component 

  constructor(props) 
    super(props);
    this.state = 
      isLoading: true,
      dataSource: null,
      refreshing: false
    ;
  

//When screen is pulled down this calls for fresh through the state its int

  _onRefresh = () => 
    this.setState( refreshing: true );
    this.componentDidMount().then(() => 
      this.setState( refreshing: false );
    );
  ;
//Gets data from API 
  componentDidMount() 
    return fetch("https://launchlibrary.net/1.4/launch?mode=verbose")
      .then(response => response.json())
      .then(responseJson => 
        this.setState(
          isLoading: false,
          dataSource: responseJson.launches
        ); 
      )
      .catch(error => 
        console.log(error);
      );
  
//Renders Screen
  render() 
    //Refresh if statement
    if (this.state.isLoading) 
      return (
        <View style=styles.container>
          <ActivityIndicator />
        </View>
      );
     else 
        //Launches is what its called on later to display what is being said in launches
        let launches = this.state.dataSource.map((item, key) => 
        return (
          <View key=key style=styles.container>
              <View style=styles.subcontainer>
              <Text>item.missions[0].name</Text>
              </View>
          </View>
        );
      );
      //Allows the screen to be scrollable w/ refresh control 
      return (
        <View style=styles.Background>
          <ScrollView
            contentContainerStyle=styles.contentContainer
            refreshControl=
              <RefreshControl
                refreshing=this.state.refreshing
                onRefresh=this._onRefresh
              />
            
           >
            launches
          </ScrollView>
        </View>
      );
    
  

我遇到的问题是从数组中的启动库 API 获取数据（任务名称）。我获取数据并将它们放入项目/密钥中。当我通过 item.missions[0].name (missions[0] 是数组) 调用任务名称时，我得到一个 TypeError: undefined is not an object。有人告诉我，我必须检查任务是否未定义，但不明白解决方案。

【参考方案1】：

假设你有一个数组的索引 (0)，并且它实际上有值，你正在尝试获取一个数组的索引 (0)。

您可以像这样检查并确保：

<Text>
  Array.isArray(item.missions) && item.missions.length && item.missions[0].name
</Text>

这将检查该值是否实际上是一个长度大于 0 的数组，以便您可以访问 0 索引。

【讨论】：

感谢您的解释！我让它与那条线一起工作！

@NoeDuran 我希望，数据总是在数组中，只要检查长度就可以了。

【参考方案2】：

在访问数组之前做这个条件检查

<Text>item.missions && item.missions[0].name</Text>

【参考方案3】：

尝试关注

<Text>item?.missions[0]?.name</Text>

【讨论】：

我以前从未见过这种语法。它有什么作用？

它检查item 不为空然后获取missions[0] 并检查它不为空然后获取name