Picker onValue Change not for every selection
I have a collector with some hardcoded values. When the value changes, I want to update my redux store with the selected value using the action creator function from my store. However, I ran into an issue where the onValueChange listener doesn't seem to be called for every selection change.
Selection code
<Picker selectedValue={this.props.settings.colorScheme}
onValueChange={(value, itemIndex) => this.props.onValueChange({prop: 'colorScheme', value})}>
<Picker.Item value="blue" label="Blue"/>
<Picker.Item value="green" label="Green"/>
<Picker.Item value="orange" label="Orange"/>
<Picker.Item value="purple" label="Purple"/>
<Picker.Item value="red" label="Red"/>
</Picker>
The method is passed to the component to handle the change in value. This is where I set breakpoints, but they usually only run for every other choice. Start with blue, then choose orange fire. Then select green and it won't light up, but then select red and it will light up again.
handleValueChange({prop, value}) {
this.props.updateSettings({prop, value})
}
Here is my decx action creator
export function updateSettings ({prop, value}) {
return {
type: UPDATE_SETTINGS,
payload: ({ prop, value }),
}
}
My render method (where onValueChange becomes handleValueChange)
render() {
return (
<Settings
settings={this.props.settings}
onValueChange={this.handleValueChange.bind(this)}
/>
)
}
source to share
I found the following workaround using componentDidUpdate
:
export default class PickerComponent extends PureComponent {
constructor (props) {
super(props)
this.state = {value:this.props.eventId}
}
componentDidUpdate () {
if (this.props.eventId !== this.state.value) {
this.props.chooseEvent(this.state.value)
}
}
onValueChange = value => {
if (value) this.setState({value})
}
makePickerItem (label, key) {
const props = {label, key, value:key}
return <Picker.Item {...props} />
}
makePickerItems = function * () {
for (let id in this.props.things) {
yield this.makePickerItem(this.props.things[id].name, eventId)
}
}
render () {
return (
<Picker
selectedValue={this.state.value}
onValueChange={this.onValueChange}
>
{[...this.makePickerItems()]}
</Picker>
)
}
}
source to share