react-native-picker-select
react-native-picker-select copied to clipboard
lawnstarter
onValueChange Event triggers every time render update
Describe the bug Picker has function prop "onValueChange" as per expectation it should work like click event, when ever someone select value, but i found this event execute all the time when render() updates, so it creating problem, because it null my state value.
To Reproduce onValueChange = { (value) => console.log("Event Triggered"+value)} Monitor console, it will execute all the time whenever render() update by any state or prop change.
Expected behavior It should execute only when we change dropdown value, after pick , not all the time
Smartphone (please complete the following information):
- Device: OnePlus2
- OS: Android
- react-native-picker-select version: 5.1.10
- react-native version: 0.55.4
- react version: 16.3.1 Reproduction and/or code sample
<PickerSelect
value={formData['country']}
placeholder={{label: I18n.t('select'), value: ''}}
style={pickerStyle}
onValueChange={(itemValue,itemIndex) => {
console.log("Country index="+itemIndex);
console.log("Country current="+formData['country']);
console.log("Country Changed="+itemValue);
this.handleChangeValue(itemValue,"country","picker")
}}
items={COUNTRY_RENDER}
/>
Once select country i set in state using "handleChangeValue" formData['country'] Whenever i change language it update my render() I tried to debug
console.log("Country index="+itemIndex);
console.log("Country current="+formData['country']);
console.log("Country Changed="+itemValue);
this.handleChangeValue(itemValue,"country","picker")
formData['country'] always return my selected country, but console.log("Country Changed="+itemValue);
does not return selected index once, i change language.
If language value is same for both english and spanish language, then it should return same index
Describe the bug Picker has function prop "onValueChange" as per expectation it should work like click event, when ever someone select value, but i found this event execute all the time when render() updates, so it creating problem, because it null my state value.
To Reproduce onValueChange = { (value) => console.log("Event Triggered"+value)} Monitor console, it will execute all the time whenever render() update by any state or prop change.
Expected behavior It should execute only when we change dropdown value, after pick , not all the time
Smartphone (please complete the following information):
- Device: OnePlus2
- OS: Android
- react-native-picker-select version: 5.1.10
- react-native version: 0.55.4
- react version: 16.3.1 Reproduction and/or code sample
<PickerSelect value={formData['country']} placeholder={{label: I18n.t('select'), value: ''}} style={pickerStyle} onValueChange={(itemValue,itemIndex) => { console.log("Country index="+itemIndex); console.log("Country current="+formData['country']); console.log("Country Changed="+itemValue); this.handleChangeValue(itemValue,"country","picker") }} items={COUNTRY_RENDER} />Once select country i set in state using "handleChangeValue" formData['country'] Whenever i change language it update my render() I tried to debug
console.log("Country index="+itemIndex); console.log("Country current="+formData['country']); console.log("Country Changed="+itemValue); this.handleChangeValue(itemValue,"country","picker")formData['country'] always return my selected country, but console.log("Country Changed="+itemValue);
does not return selected index once, i change language.
If language value is same for both english and spanish language, then it should return same index
you can solve by using if condition in on value change
like this
onValueChange={(value) => {
if(itemValue!=this.state.PickerValueHolder){
this.setState({
PickerValueHolder: value,
});
//your function
}
}
}
Hi, When I change the value, the onValuechange fires, but its delayed and the value returned is always one behind. i.e the default value is 'Select a Category' the other values are Music, Poetry, Comedy.
when I pick Music and the onValueChange fires the first time it returns "null" , when I pick Poetry it returns "Music". so everytime its one behind, any ideas whas going on am I doing something wrong
<RNPickerSelect
placeholder={{
label: 'Select a Category...',
value: null,
}}
items={this.state.items}
onValueChange={(value) => this.setEventCategory(value)}
style={{...pickerSelectStyles}}
value={this.state.eventCategory}
ref={(el) => {
this.inputRefs.picker = el;
}}
/>
Thank you for any help and thank you for RNPickerSelect
@indrsidhu please create an example on snack.expo.io or share a github project with your issue -- I have tried to reproduce and I'm not having that issue (https://snack.expo.io/S1O1Q5914)
@AndrewAi please create an example on snack.expo.io or share a github project with your issue --- nothing looks wrong in what you've shared (although I don't know what setEventCategory does.
Hi, When I change the value, the onValuechange fires, but its delayed and the value returned is always one behind. i.e the default value is 'Select a Category' the other values are Music, Poetry, Comedy. when I pick Music and the onValueChange fires the first time it returns
"null", when I pick Poetry it returns"Music". so everytime its one behind, any ideas whas going on am I doing something wrong<RNPickerSelect placeholder={{ label: 'Select a Category...', value: null, }} items={this.state.items} onValueChange={(value) => this.setEventCategory(value)} style={{...pickerSelectStyles}} value={this.state.eventCategory} ref={(el) => { this.inputRefs.picker = el; }} />Thank you for any help and thank you for RNPickerSelect
Yes i think you are setting state and then calling some Api Will suggest you should use like that this.setstate({“your state same”:value},()=>{console.log(this.state.yourstatename)})
Hi thank you for your comments. this is my setEventCategory function setEventCategory(eventCategory){ this.setState({eventCategory: eventCategory}); console.log('setEventCategory: eventCategory: ', this.state.eventCategory) }
very simple. should I be using some onSubmit or onDonePress instead of onValueChange ? Thanks very much
Hi thank you for your comments. this is my setEventCategory function
setEventCategory(eventCategory){ this.setState({eventCategory: eventCategory}); console.log('setEventCategory: eventCategory: ', this.state.eventCategory) }very simple. should I be using some onSubmit or onDonePress instead of onValueChange ? Thanks very much
Try this way this will work setEventCategory(eventCategory){ this.setState({eventCategory: eventCategory},()=>{console.log('setEventCategory: eventCategory: ', this.state.eventCategory) })}
I'm seeing the same issue but am unable to reproduce via snack.expo.io. I observed the following sequence:
- Picker initialized with an initial value, say 'one'
- Callback occurs via onValueChange and setState invoked with new value, say 'two'
- getDerivedStateFromProps called in RNPickerSelect. The nextProps has the prior select value of 'one', state has the value of 'two'.
- Logic decides that selected state has changed and onValueChanged called again with the nextProps value of 'one' which is the 'old' value. onValueChanged queues up another setState switching the value back to 'one',
- The parent finally invokes render for the first time with the state of 'two'
- The infinite loop begins switching between the two states.
I worked around this by removing the call nextProps.onValueChange(selectedItem.value, idx); from getDerivedStateFromProps.
I experienced the exact same issue as @glenne. Removing nextProps.onValueChange(selectedItem.value, idx) from getDerivedStateFromProps also fixed the problem for me.
@jpandl19 @glenne i'm going to release a version with a prop to disable that. should resolve the issue for now and then we can look into it further in the future.
I fixed mine by turning it into a controlled component like most of the other react-native components so rendering is only driven by props with not state memory. This actually simplifies a number of interactions.
onValueChange(value, index) {
const { onValueChange } = this.props;
onValueChange(value, index);
}
static getDerivedStateFromProps(nextProps, prevState) {
const newItems = RNPickerSelect.handlePlaceholder({
placeholder: nextProps.placeholder
}).concat(nextProps.items);
const { selectedItem, idx } = RNPickerSelect.getSelectedItem({
items: newItems,
key: nextProps.itemKey,
value: nextProps.value
});
return {
items: newItems,
selectedItem: selectedItem
};
}
@glenne @EyMaddis @jpandl19 would you mind checking if this branch solves the issue you were having?
i'd ideally like to make as few breaking changes as possible, so this change will just prevent the internal selectedValue state change from occurring after an onValueChange call IF you have the value prop defined. that way, it will be closer to the controlled component pattern.
@santanapaulo does this branch solve your issue?
No @lfkwtz , It didn't work. I installed the version at that branch you said, but no happy ending :/
I was experiencing this in the iOS simulator. Disabling Hot Reloading from the Inspector seems to have fixed this in my case.
I don't know why, but I fixed the extra render when I removed the props. itemKey.
Happy to look into this further if someone can provide a working demo that clearly identifies the issue
It happened for me whenever I setState inside a promise on onValueChange:
Example:
import PickerSelect from 'react-native-picker-select';
import { View } from 'react-native';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
state: null,
states: [{ label: 'Arizona', value: 1}, { label: 'California', value: 2}]
}
}
handleStateChange(state) {
// This is a promise
StateApi.getStates().then(statesResponse => {
console.log("Logger");
this.setState(state);
});
}
render() {
<View>
<PickerSelect
items={states}
onValueChange={this.handleStateChange}
value={this.state.state}
ref={(el) => {
this.inputRefs.state = el;
}}
/>
</View>
}
}
Whenever I change the value of the picker one time, the function handleStateChange is triggered twice.
@EyMaddis fork fixed this issue for me.
https://github.com/simpleTechs/react-native-picker-select/commit/e70f4b34c7cebeb8f322524a8f262f08e9c0cc3a
Could this get merged?
My problem was anytime the value was changed elsewhere, the callback was still called.
Fixed for now.
How about change order of two lines?
Or we can fire onValueChange after state is updated like followings. this.setState({ selectedItem: this.state.items[index], }, () => onValueChange(value, index));
@glenne @EyMaddis @jpandl19 would you mind checking if this branch solves the issue you were having?
i'd ideally like to make as few breaking changes as possible, so this change will just prevent the internal selectedValue state change from occurring after an onValueChange call IF you have the
valueprop defined. that way, it will be closer to the controlled component pattern.
Sorry for the late reply. This branch worked for me.
Due to some personal travel I won't be able to test for a few weeks but check it out.
On Wed, Nov 20, 2019 at 5:31 PM Michael Lefkowitz [email protected] wrote:
@jpandl19 https://github.com/jpandl19 @glenne https://github.com/glenne https://github.com/lawnstarter/react-native-picker-select/tree/v7
i've incorporated those changes into an upcoming release - mind testing that branch out to see if the changes are still resolved? it's been a while since I made that original one
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/lawnstarter/react-native-picker-select/issues/112?email_source=notifications&email_token=AAITQ6EDB5OKV5AX2SWW7FLQUXQGPA5CNFSM4GE7T5C2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEX463A#issuecomment-556781420, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITQ6D74WEKZ5RRLKIMAR3QUXQGPANCNFSM4GE7T5CQ .
@glenne thanks - i pulled that comment off as I don't think the branch was ready. will post here again soon if anyone wants to check out the bugfix.
my plan is to release this change so we can finally close out this bug - afterwards, I'd like to setup a split export in a future version with a controlled component which can live in beta for now and potentially replace the original down the line
@glenne @jpandl19 (and anyone else)
please test this beta version to see if this issue has (finally) been resolved https://www.npmjs.com/package/react-native-picker-select/v/7.0.0-beta.0
as mentioned above, i plan to release a v7 with this fix -- and then start work on a controlled component
I am using the beta version 7.0.0-beta.0. It did fix an issue with the dropdown changing the values a couple times before going back to the correct value.
In the onValueChange I still have to check if the value does not equal the new one using an if statement, otherwise it results in an infinite loop. That is still a bug should be addressed. In other pickers there is no need for the if statement.
onValueChange={(value, index) => { if (value != this.state.value) this.valueChanged(value, index-1); }}
Also, when there is a placeholder, it gets included in the array of values, so the index needs to be adjusted by -1. That should probably not be the case either.
