如何处理一个阵列和两个反应本机选择器

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>

但是它给出了这样的错误

  

length = 2; index = 2

这是错误图像的链接。 https://imgur.com/ak3tvTB 我的信誉不够，所以无法在这里展示