antd自定義組件在componentWillMount中使用onChange返回組件默認值信息,多次切換其他Select的選項竟然導致報錯!
WrappedCheckbox 自定義組件 如下,因爲使用了componentWillMount
import React, { Component } from 'react';
import { Checkbox } from 'antd';
// const WrappedCheckbox: React.FC<any> = ({
// value,
// onChange
// }) => {
// let status = true;
// if (value === false || value === 'false') status = false;
// return (
// <Checkbox
// checked={status}
// onChange={onChange}>
// </Checkbox>
// );
// }
interface checkboxProps {
onChange: Function;
value: boolean;
}
interface checkboxState {
checked: boolean
}
class WrappedCheckbox extends Component<checkboxProps, checkboxState> {
static getDerivedStateFromProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
return {
...(nextProps.value || {}),
};
}
return null;
}
constructor(props) {
super(props)
const value = props.value || false;
this.state = {
checked: value
}
}
// componentDidMount() {
// const { onChange } = this.props;
// if (onChange) {
// onChange({
// checked: false
// })
// };
// }
changeChecked = (e) => {
if (!('value' in this.props)) {
this.setState({ checked: e.target.checked });
} else {
const { onChange } = this.props;
if (onChange) {
onChange({
...this.state,
checked: e.target.checked
});
}
}
}
render() {
return (
<Checkbox
checked={this.state.checked}
onChange={this.changeChecked}
>
</Checkbox>
)
}
}
export default WrappedCheckbox
報錯信息如下
https://www.iteye.com/blog/schifred-2354776 這篇文章有提到是獲取校驗規則的時候出的錯,而且有一段報錯指向自定義組件componentDidMount中的onChange,所以我覺得應該是這裏導致的問題。