react-native - 如何使用一个数组和两个反应原生选择器

Question

我想为两个选择器使用一个数据数组。如果一个选择器选择了一个选项，那么我需要从其他选择器中删除该选项。我从以下代码尝试了这个。我使用了长度为 2 的数组。

constructor(props) {
    super(props);
    this.state = {
      startTown: 'Start Point',
      endTown: 'End Point',
      townList: null,
    };
}

componentDidMount(){
    firebase.database().ref('busRoutes').once("value",(snapshot)=>{
      this.setState({townList:snapshot.val()})
    })
  }

<Box dir="row">
    <Picker
      style={{flex: 1}}
      selectedValue={startTown}
      onValueChange={(value) => {
      this.setState({
         startTown: value,
      });
    }}>
    <Picker.Item value='Start Point' label='Start Point' />
    {townList && townList.map((element,index)=>{
         if(element===endTown) return;
         return(<Picker.Item value={element} label={element} />)
     })}
   </Picker>
   <Picker
       style={{flex: 1}}
       selectedValue={endTown}
       onValueChange={(value) => {
         this.setState({
            endTown: value,
         });
       }}>
    <Picker.Item value='End Point' label='End Point' />
    {townList && townList.map((element,index)=>{
        if(element===startTown) return; 
        return(<Picker.Item value={element} label={element} />)
     })}
   </Picker>
</Box>

但它给出了这样的错误

长度=2；索引=2

这是错误图像的链接。 https://imgur.com/ak3tvTB 我不能把它放在这里，因为我的声誉还不够

标签： react-nativereact-native-android