Как я могу использовать componentDidMount для вкладок?

Question

У меня есть три вкладки react-navigation и createMaterialTopTabNavigator.Теперь я хочу показать некоторые данные на вкладках json и componentDidMount, но у меня появляется эта ошибка, когда я помещаю componentDidMount в две вкладки:

null не является объектом (оценивая 'this.state.dataSource ')

Когда я использую componentDidMount на одной вкладке, все в порядке и работает нормально.

Одна из моих вкладок:

export default class HomeTabScreen extends React.Component{

componentDidMount(){
    return fetch('men-cat.php')
    .then((response)=>response.json()).
    then((responseJson)=>{
      let ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!=r2});
      this.setState({
        isLoading:false,
        dataSource:ds.cloneWithRows(responseJson)
      });
    }).done();
  }

  render() {
    return (
      <ScrollView>
      <ListView style={{zIndex:1}}
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        enableEmptySections={true}
        renderRow={ (rowData)=>

            <View style={styles.cats}>
              <TouchableOpacity activeOpacity={0.8} onPress={()=>{this.props.navigation.navigate('Products' , {
                title: rowData.name,
              })}}>
                <ImageBackground source={{uri:rowData.thumb}} imageStyle={{ borderRadius: 5 }} style={styles.imgBgCats}>
                  <Text style={styles.homeCatsCostTitle}>{rowData.name}</Text>
                </ImageBackground>
              </TouchableOpacity>
            </View>
          }
          />
    </ScrollView>

    );
  }
}

root:

const MenStack = createStackNavigator({
  menStackNav: { screen: MenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  },
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

MenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
}

const HomeScreenTabs = createMaterialTopTabNavigator({
  Home:{
    screen:HomeTabScreen,
  },
  Women: {
    screen:WomenTabScreen,
  },
  Men: {
    screen:MenStack,
  },

},{
  tabBarOptions: {
    style:{backgroundColor:'#fff'},
    activeTintColor: '#0077FF',
    inactiveTintColor: '#0077FF60',
    indicatorStyle: {
      opacity: 0
    },
    tabStyle:{backgroundColor:'#fff',height:40,borderBottomColor:'#fff'},
    labelStyle: {
      borderBottomColor:'#fff',
        fontSize: 14,
      },
  },
    initialRouteName: 'Men',
    mode: 'modal',
    headerMode: 'none',
});

Answer 1

Ошибка, которую вы получаете, происходит потому, что, пока ваша выборка ожидает ответа, функция рендеринга пытается отрисовать ListView с несуществующим источником данных.

Вы можете решить проблему, установив начальное значение в состоянии для пустого источника данных, или, альтернативно, добавьте проверку в функцию рендеринга, которая будет отображать ListView только если источник данных не равен нулю.

{!!this.state.dataSource &&
 <ListView
    ...
 />}

Наконец, ListView устарела и была заменена на FlatList, который имеет гораздо более дружественный API.