TronNatthakorn / react-native-wheel-pick

Apache License 2.0
177 stars 85 forks source link

If the data length changes, the wrong result will be selected #46

Open A-ANing opened 11 months ago

A-ANing commented 11 months ago

If the length of the picker's data list is updated, the selected result is incorrect and not fixed, resulting in me not knowing the onChange result in calling JS;

If the length changes, the first or other fixed index should be selected to let us know which result is selected

anhquan291 commented 10 months ago

Facing the same issue. Any suggestions guys? Thank you

krmao commented 7 months ago

same, even if forceUpdate, on android google pixel 7 pro, after change months.length

    <Picker
                  ref={this.monthRef}
                  style={styles.picker}
                  pickerData={months}
  componentDidUpdate(prevProps: Readonly<DatePickerProps>, prevState: Readonly<DatePickerState>, _snapshot?: any) {
    if (!_.isEqual(this.props, prevProps) || !_.isEqual(this.state, prevState)) {
      console.log('DatePicker ---- componentDidUpdate');
      console.log('DatePicker ---- prevProps', prevProps);
      console.log('DatePicker ---- this.props', this.props);
      console.log('DatePicker ---- prevState', prevState);
      console.log('DatePicker ---- this.state', this.state);
      this.forceUpdate(() => {
        console.log('DatePicker ---- forceUpdate callback');
      });
      (this.monthRef?.current as any)?.forceUpdate(() => {
        console.log('DatePicker ---- monthRef forceUpdate callback');
      });
    }
  }

image

will show month picker after a finger touch move

image


now a quick fix ! @anhquan291

setState "disableMonth: true" and then setState "disableMonth: false"

// https://github.com/TronNatthakorn/react-native-wheel-pick/issues/46#issuecomment-1835565798
const originDisableMonth = disableMonth;
const originDisableDay = disableDay;

this.setState(
  {
    disableMonth: true,
    disableDay: true,
  },
  () => {
    this.setState({ disableMonth: originDisableMonth, disableDay: originDisableDay });
  },
);
{!disableMonth && !!months && !!months.length && (
      <Picker
        style={styles.picker}
        pickerData={months}
        ...
}