Replaced componentWillreceiveProps with getDerivedStateFromProps

This commit is contained in:
Bruno Fenzl 2020-09-25 10:12:14 +02:00
parent d49535da03
commit 0ae52223dc
2 changed files with 15 additions and 10 deletions

View File

@ -145,11 +145,12 @@ export default class JSONNestedNode extends React.Component<Props, State> {
this.state = getStateFromProps(props); this.state = getStateFromProps(props);
} }
UNSAFE_componentWillReceiveProps(nextProps: Props) { static getDerivedStateFromProps(nextProps: Props, state: State): State | null {
const nextState = getStateFromProps(nextProps); const nextState = getStateFromProps(nextProps);
if (getStateFromProps(this.props).expanded !== nextState.expanded) { if (nextState.expanded !== state.expanded) {
this.setState(nextState); return nextState;
} }
return null;
} }
shouldComponentUpdate(nextProps: Props, nextState: State) { shouldComponentUpdate(nextProps: Props, nextState: State) {

View File

@ -16,13 +16,15 @@ import {
} from 'react-base16-styling'; } from 'react-base16-styling';
import { CircularPropsPassedThroughJSONTree } from './types'; import { CircularPropsPassedThroughJSONTree } from './types';
interface Props extends CircularPropsPassedThroughJSONTree { interface ThemesConf {
data: any;
theme?: Theme; theme?: Theme;
invertTheme: boolean; invertTheme?: boolean;
}
interface Props extends CircularPropsPassedThroughJSONTree, ThemesConf {
data: any;
} }
interface State { interface State extends ThemesConf {
styling: StylingFunction; styling: StylingFunction;
} }
@ -133,14 +135,16 @@ export default class JSONTree extends React.Component<Props, State> {
this.state = getStateFromProps(props); this.state = getStateFromProps(props);
} }
UNSAFE_componentWillReceiveProps(nextProps: Props) { static getDerivedStateFromProps(nextProps: Props, state: State): State | null {
if ( if (
['theme', 'invertTheme'].find( ['theme', 'invertTheme'].find(
(k) => nextProps[k as keyof Props] !== this.props[k as keyof Props] (k) => nextProps[k as keyof ThemesConf] !== state[k as keyof ThemesConf]
) )
) { ) {
this.setState(getStateFromProps(nextProps)); return getStateFromProps(nextProps);
} }
return null;
} }
shouldComponentUpdate(nextProps: Props) { shouldComponentUpdate(nextProps: Props) {