开发者问题收集

TypeError:undefined 不是对象,item 来自 API 的数组

2018-10-06
1060
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 获取数据(任务名称),该 API 位于数组中。我获取数据并将它们放入 item/key 中。当我通过 item.missions[0].name(missions[0] 是数组)调用任务名称时,我收到 TypeError:undefined 不是对象。有人告诉我必须检查任务是否未定义,但我不明白该如何解决。

3个回答

您尝试获取一个数组的索引 (0),假设您有一个数组并且它里面确实有值。

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

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

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

Akrion
2018-10-06

访问数组之前执行此条件检查

<Text>{item.missions && item.missions[0].name}</Text>
Hemadri Dasari
2018-10-06

尝试关注

<Text>{item?.missions[0]?.name}</Text>
Dileepa Chandima
2018-10-06