为什么不渲染本机组件？

Question

我正在尝试为 select 国家和团队实现一个团队选择器组件，用于我的反应原生应用程序。 为此，我已经完成了一个组件实现，其中包含 2 个幻灯片放映组件到 select 一个国家和相关团队。 在最初的 state 中，一切正常，但是当我按下国家箭头时，select 团队的幻灯片视图是不可见的。 我正在使用以下幻灯片视图组件；

https://github.com/kristerkari/pinar

我的组件如下所示；

团队选择器组件；

export default class TeamSelectScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {currentCountyIndex: 0, 
                  countries: [
                    {name: "england", logo: ""}, 
                    {name: "spain", logo: ""} 
                  ],
                  teams: [
                      [{name: "team1", logo : ""}, {name: "team2", logo : ""}, {name: "team3", logo : ""}],
                      [{name: "barca", logo : ""}, {name: "madrid", logo : ""}]
                    ] 
                }
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Select your team</Text>
        <Selector data={this.state.countries} onIndexChanged={(index) => {this.setState({currentCountyIndex : index})} }/>
        <Selector data={this.state.teams[this.state.currentCountyIndex]} onIndexChanged={(x) => {}}/>
      </View>
    )
  }
}

选择器组件；

export default class Selector extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Carousel 
      loop={true}
      onIndexChanged={(index) => {this.props.onIndexChanged(index.index)} }>
        {this.props.data.map((value, index) => {
          console.log("value :", value)
          return (
            <View key={value.name} style={styles.slide1}>
              <Text style={styles.text}>{value.name}</Text>
            </View>
          )
        })}
      </Carousel>
    )
  }
}

另外，我附上了初始 state 并在按下国家按钮后：

任何想法？

谢谢。

Answer 1

我注意到您导出默认相同的 class 名称（TeamSelectScreen）。 它是两个单独的文件还是相同的？