diff --git a/components/checkbox/Group.js b/components/checkbox/Group.js index 8ea862e30..26edc82d2 100644 --- a/components/checkbox/Group.js +++ b/components/checkbox/Group.js @@ -9,11 +9,11 @@ const prefixCls = 'hi-checkbox-group' class Group extends Component { constructor (props) { super(props) - this.state = getData(props) + this.state = { data: getData(props), value: props.value } } - static getDerivedStateFromProps (nextProps) { - if (hasValue(nextProps)) { - return getData(nextProps) + static getDerivedStateFromProps (nextProps, state) { + if (nextProps.value !== state.value || getData(nextProps) !== state.data) { + return { data: getData(nextProps), value: nextProps.value } } return null } @@ -63,27 +63,24 @@ class Group extends Component { } function hasValue (props) { - const has = (key) => Object.prototype.hasOwnProperty.call(props, key) - return has('value') + return props.value !== undefined } function getData (props) { const { data, value, defaultValue } = props const _value = hasValue(props) ? value : defaultValue - return { - data: data.map((item) => { - const isPlain = ['string', 'number'].includes(typeof item) - const label = isPlain ? item : item.content - const value = isPlain ? item : item.id - const disabled = !isPlain && item.disabled - return { - label, - value, - disabled, - checked: (_value || []).includes(value) - } - }) - } + return data.map((item) => { + const isPlain = ['string', 'number'].includes(typeof item) + const label = isPlain ? item : item.content + const value = isPlain ? item : item.id + const disabled = !isPlain && item.disabled + return { + label, + value, + disabled, + checked: (_value || []).includes(value) + } + }) } const PropTypesArrayOfStringOrNumber = PropTypes.oneOfType([ diff --git a/components/radio/Group.js b/components/radio/Group.js index fe27aa992..422ae68bb 100644 --- a/components/radio/Group.js +++ b/components/radio/Group.js @@ -10,11 +10,11 @@ const prefixCls = 'hi-radio-group' class Group extends React.Component { constructor (props) { super(props) - this.state = getData(props) + this.state = { data: getData(props), value: props.value } } - static getDerivedStateFromProps (nextProps) { - if (hasValue(nextProps)) { - return getData(nextProps) + static getDerivedStateFromProps (nextProps, state) { + if (nextProps.value !== state.value || getData(nextProps) !== state.data) { + return { data: getData(nextProps), value: nextProps.value } } return null } @@ -71,27 +71,24 @@ function GroupWrapper ({ children, type, ...restProps }) { } function hasValue (props) { - const has = (key) => Object.prototype.hasOwnProperty.call(props, key) - return has('value') + return props.value !== undefined } function getData (props) { const { data, value, defaultValue } = props const _value = hasValue(props) ? value : defaultValue - return { - data: data.map((item) => { - const isPlain = ['string', 'number'].includes(typeof item) - const label = isPlain ? item : item.content - const value = isPlain ? item : item.id - const disabled = !isPlain && item.disabled - return { - label, - value, - disabled, - checked: _value === value || Number(_value) === value - } - }) - } + return data.map((item) => { + const isPlain = ['string', 'number'].includes(typeof item) + const label = isPlain ? item : item.content + const value = isPlain ? item : item.id + const disabled = !isPlain && item.disabled + return { + label, + value, + disabled, + checked: _value === value || Number(_value) === value + } + }) } const PropTypesOfStringOrNumber = PropTypes.oneOfType([