I have a Picker, the list of which is loaded dynamically, based on what was previously selected. When I select a value from a list, I would like to move it to another list and remove it from the parameters. The problem is that when I select a parameter, every time the list is re-displayed due to setState, it selects the topmost value and runs onValueChange for that value. This causes each value to fire an event and empty the list every time.
I tried to split the collector into my own component, I tried it both with the selected default value and without it, I set the selected value as the highest value, null, undefined, you will name it. I cannot figure out how to prevent this event from triggering when the list reloads.
Take the following demo application , for example:
import React, { Component } from 'react'; import { AppRegistry, Picker, Text, View } from 'react-native'; export default class Sandbox extends Component { constructor(props) { super(props); this.state = { list: [ {id: 1, title: "One"}, {id: 2, title: "Two"}, {id: 3, title: "Three"}, {id: 4, title: "Four"}, ], selected: [] }; } updateLists(id) { var list = this.state.list; var selected = this.state.selected for(var i = 0; i < list.length; i++) { var obj = list[i]; if(obj.id == id) { selected.push(obj); list.splice(i, 1) } } this.setState({ list: list, selected: selected }); } render() { return ( <View> <Picker onValueChange={(id) => { this.updateLists(id); }}> {this.state.list.map((item, index) => { return <Picker.Item key={index} label={item.title} value={item.id} /> })} </Picker> <Text>{this.state.selected.toString()}</Text> </View> ); } } AppRegistry.registerComponent('Sandbox', () => Sandbox);
If you select any value from this list, the updateLists() method will be launched for each value until all of them are deleted. Using the RN Play affiliate link, I found this to be an Android-only issue. iOS works (mostly) perfectly.