Исключение вне пределов при изменении значения для Dynami c picker реагирует native

Question

Я создаю приложение типа магазина в react native и продолжаю получать исключение за пределами допустимого диапазона при изменении выбранного значения моего сборщика. На моей странице продукта я намерен разместить несколько сборщиков. Однако в настоящее время я использую только один и получаю эту ошибку. Ниже я приведу фрагменты:

На данный момент я поместил свои исходные данные непосредственно в состояние. Затем я передаю эту информацию каждому отдельному компоненту средства выбора.

Продукт. js

constructor(props){
        super(props);
        this.state = {
            subItemsGroup:[{
                "id":1,
                "name":"test group",
                "products": [8,9], //these id's are stored elsewhere and retrieved in the component
                "selected": -1
            }]
        }
        this.optionPickerChange = this.optionPickerChange.bind(this);
    }

optionPickerChange(newValue, subItemsGroupId){
        let newState = Object.assign({},this.state);
        let idx = newState.subItemsGroup.findIndex((item)=>
            item.id === subItemsGroupId
        );
        newState.subItemsGroup[idx].selected = newValue;
        this.setState(newState);
    }

return(
      this.state.subItemsGroup.map((item, index)=>(
          <SubItemsPicker 
              key={item.length} 
              groupId={item.id} 
              groupProducts={item.products} 
              pickerVal={item.selected}
              pickerOnChange={this.optionPickerChange}
              />
             )
           )
)

SubItemsPicker. js

function SubItemsPicker({ groupId, groupProducts, pickerVal = -1, pickerOnChange, SubItems }){

    return (
        <View>

           <Picker
            selectedValue={pickerVal}
            onValueChange={(value)=>pickerOnChange(value, groupId)}>
                <Picker.Item label={'Please select'} value={-1} key={-1} />
                   {SubItems.map((item)=>{
                      If(groupProducts.includes(item.id)){
                        return (  
                          <Picker.Item label={item.name} value={item.id} key={item.id} />
                       );
                     }
                   })}
                </Picker>
        </View>
    );
}

Следующая структура используется для заполнения элементов средства выбора.

Структура подэлементов

[
    {
        "id": 8,
        "name": "test 1",

    }, {
        "id": 9,
        "name": "test 2",
    }
]

Когда я выбираю средство выбора для изменения на новое значение, параметр успешно обновляется в состоянии, но средство выбора немедленно выдает исключение за пределами границ. Может ли это быть из-за того, что элементы сборщика генерируются динамически?