Skip to content

Commit

Permalink
Merge pull request #122 from alexnaiman/fix_for_react_native_update
Browse files Browse the repository at this point in the history 
PR to fix react-native warning on `componentWillReceiveProps`
  • Loading branch information
@jaydenwindle
jaydenwindle authored Dec 25, 2019
2 parents 776ea25 + dee6a83 commit 43d9356
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
4 changes: 2 additions & 2 deletions examples/CustomPicker/ModalPickerImage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ export default class ModalPicker extends BaseComponent {
this.setState({ cancelText: this.props.cancelText });
}

componentWillReceiveProps(nextProps) {
this.setState({ data: nextProps.data });
componentDidUpdate() {
this.setState({ data: this.props.data });
}

onChange(item) {
Expand Down
4 changes: 2 additions & 2 deletions lib/countryPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ export default class CountryPicker extends Component {
this.onValueChange = this.onValueChange.bind(this);
}

componentWillReceiveProps(nextProps) {
componentDidUpdate() {
this.setState({
selectedCountry: nextProps.selectedCountry,
selectedCountry: this.props.selectedCountry,
});
}

Expand Down
6 changes: 3 additions & 3 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ export default class PhoneInput extends Component {
};
}

componentWillMount() {
componentDidMount() {
if (this.props.value) {
this.updateFlagAndFormatNumber(this.props.value);
}
}

componentWillReceiveProps(nextProps) {
const { value, disabled } = nextProps;
componentDidUpdate() {
const { value, disabled } = this.props;
this.setState({ disabled });

if (value && value !== this.state.value) {
Expand Down

3 comments on commit 43d9356

@lucaRizzuti
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This creates an infinite loop. The set state must be wrapped in a condition.

@lam3rr
Copy link

@lam3rr lam3rr commented on 43d9356 Jan 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i faced the same problem when using the master branch. it causes a infinite loop.
require a condition for disabled,

for the componentDidUpdate functions, it should be changed to

examples/CustomPicker/ModalPickerImage/index.js

componentDidUpdate(prevProps) {
    if (this.props.data && prevProps.data !== this.props.data) {
      this.setState({ data: this.props.data });
    }
  }

lib/countryPicker.js

componentDidUpdate(prevProps) {
    if (this.props.selectedCountry && prevProps.selectedCountry !== this.props.selectedCountry) {
      this.setState({
        selectedCountry: this.props.selectedCountry,
      });
    }
  }

lib/index.js

componentDidUpdate(prevProps) {
    const { value, disabled } = this.props;
    if (disabled && prevProps.disabled !== disabled) {
      this.setState({ disabled });
    }
    if (value && prevProps.value !== value) {
      this.setState({ value });
      this.updateFlagAndFormatNumber(value);
    }
  }

@jaydenwindle could you look into this?

@hanford
Copy link

@hanford hanford commented on 43d9356 Jan 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix @lam3rr

Please sign in to comment.