TypeError: Can't read property 'map of undefined in React Native

Question

我正在做 React Native 项目。我有数据数组，在渲染方法中我试图循环它，它就像一些自定义标签栏。但是，加载后，我试图从一个选项卡切换到另一个选项卡，它抛出错误并崩溃

TypeError: Can't read property 'map of undefined in React Native .

我的密码是

dashboard.js
constructor(props) {
    super(props);
    this.state = { 
    selectedIndex:0,
    tabList:[
      {tabName: ‘Telugu’, tabActiveImage:TeluguActiveImg, tabInactiveImage: TeluguInActiveImg, tabActiveText:'black', tabInactiveText: 'gray'},
      {tabName: ‘Tamil’, tabActiveImage:TeluguActiveImg, tabInactiveImage: TeluguActiveImg, tabActiveText:'black', tabInactiveText: 'gray'},
      {tabName: ’Hindi’, tabActiveImage: HindiActiveImg, tabInactiveImage: HindiInActiveImg, tabActiveText:'black', tabInactiveText: 'gray'},
      {tabName: ‘English’, tabActiveImage: EnglishActiveImg, tabInactiveImage: EnglishInActiveImg, tabActiveText:'black', tabInactiveText: 'gray'},
    ]
}
 }

OnTabItemHandler = (index) => {
    this.setState({selectedIndex:index})
    console.log('selected index is',index)

}

    render(item) {
        const {tabList} = this.state;
        return (
<View>Some static data loading </View>
 <View style = {styles.tabContainer}>
            {
            //loop throught the state
            this.state.tabList.map((item,index)=>{
              return(
                //the style just to make it beautiful and easy to debug
                <View style ={styles.tabInnerContainer}>
                <TouchableOpacity style={styles.tabIcons}
                  //this onpress to handle of active selected tab
                onPress={()=>this.OnTabItemHandler(index)}
                >
                    <Image
                      //here's the magic show off
                      source={this.state.selectedIndex=index?item.tabActiveImage:item.tabInactiveImage}
                      style={styles.tabItemsImages}
                    />
                    <Text style={styles.tabItemTextBlackColor}>{item.tabName}</Text>
                </TouchableOpacity>
                </View>
              )
            })
        }
              </View>
              {this.renderBottomContent(item)}
          </View>


      );
    }
  }

and bottom view is based on tab, I am changing the bottom view

 renderBottomContent = (item) => {


    this.state = { dataArray: getListData()}    

    switch(selectedTab) {
      case "Telugu":
        return <View style = {styles.flatListContainer}>  
    //show flat list data
         }
          ItemSeparatorComponent = {() => (
              <View style={{height:15, backgroundColor:'blue'}/>
          )}
      />
    </View >
      case "Tamil":
        return <View style = {styles.bottomStaicScreensForTabs}>
            <Text>
                Tamil feature will come
                </Text>
                </View>
     case "Hindi":
        return <View style = {styles.bottomStaicScreensForTabs}>
            <Text>
                Hindi feature will come
                </Text>
                </View>
    default:
        return <View><Text></Text></View>
    }
  }

And also tab text colour not changing, always coming as black. Can anyone help me, where I am doing wrong.

Answer 1

为了更好地理解这个问题，我创建了一个 snack。我将 post 代码放在这里以防它不再可用。 注意：它的样式不正确，图像也不是您想要的那样动态，但它可以很好地重现问题。

  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
      tabList: [
        {
          tabName: 'Telugu',
          tabActiveImage: '',
          tabInactiveImage: '',
          tabActiveText: 'black',
          tabInactiveText: 'gray',
        },
        {
          tabName: 'Tamil',
          tabActiveImage: '',
          tabInactiveImage: '',
          tabActiveText: 'black',
          tabInactiveText: 'gray',
        },
        {
          tabName: 'Hindi',
          tabActiveImage: '',
          tabInactiveImage: '',
          tabActiveText: 'black',
          tabInactiveText: 'gray',
        },
        {
          tabName: 'English',
          tabActiveImage: '',
          tabInactiveImage: '',
          tabActiveText: 'black',
          tabInactiveText: 'gray',
        },
      ],
    };
  }

  onTabItemHandler = index => {
    this.setState({ selectedIndex: index });
  };

  renderBottomContent = () => {
    const { selectedIndex, tabList } = this.state;
    const itemSelected = tabList[selectedIndex];
    switch (itemSelected.tabName) {
      case 'Telugu':
        return (
          <View style={{backgroundColor: 'yellow'}}>
            <Text>Telugu feature will come</Text>
          </View>
        );
      case 'Tamil':
        return (
          <View style={{backgroundColor: 'green'}}>
            <Text>Tamil feature will come</Text>
          </View>
        );
      case 'Hindi':
        return (
          <View style={{backgroundColor: 'cyan'}}>
            <Text>Hindi feature will come</Text>
          </View>
        );
      default:
        return (
          <View>
            <Text>No content</Text>
          </View>
        );
    }
  };

  render() {
    const { tabList, selectedIndex } = this.state;

    return (
      <View style={styles.container}>
        <Text>Some static data loading </Text>
        <View style={styles.tabContainer}>
          {//loop throught the state
          tabList.map((item, index) => {
            return (
              //the style just to make it beautiful and easy to debug
              <View style={styles.tabInnerContainer}>
                <TouchableOpacity
                  style={styles.tabIcons}
                  //this onpress to handle of active selected tab
                  onPress={() => this.onTabItemHandler(index)}>
                  <Image
                    //here's the magic show off
                    source={
                      selectedIndex === index
                        ? require('./assets/snack-icon.png')
                        : undefined
                    }
                    style={{ height: 30, width: 30 }}
                  />
                  <Text
                    style={{
                      color:
                        selectedIndex === index
                          ? item.tabActiveText
                          : item.tabInactiveText,
                    }}>
                    {item.tabName}
                  </Text>
                </TouchableOpacity>
              </View>
            );
          })}
        </View>
        {this.renderBottomContent()}
      </View>
    );
  }

我仍然在这里寻求任何澄清或改进。

更新 添加样式如：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  tabContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});