maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Deduplicated many warnings (#11140) (#11216) 

*  Deduplicated many warnings (#11140)

*  Deduplicated the following warnings:

1.  Can only update a mounted or mounting component.
    This usually means you called setState, replaceState,
    or forceUpdate on an unmounted component. This is a no-op

2.  %s.componentWillReceiveProps(): Assigning directly to
    this.state is deprecated (except inside a component's
    constructor). Use setState instead.'

3.  An update (setState, replaceState, or forceUpdate) was scheduled
    from inside an update function. Update functions should be pure,
    with zero side-effects. Consider using componentDidUpdate or a
    callback.

4.  setState(...): Cannot call setState() inside getChildContext()

* Code review changes made for #11140

* Minor style fix

* Test deduplication for noop updates in server renderer

* Test deduplication for cWRP warning

* Test deduplication for cWM setState warning

* Test deduplication for unnmounted setState warning

* Fix existing Flow typing

* Test deduplication for invalid updates

* Test deduplication of update-in-updater warning
This commit is contained in:
Anushree Subramani 2017-10-31 18:05:28 +05:30 committed by Dan Abramov
parent 7f10fae4c1
commit 3f1f3dc12e
10 changed files with 96 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js vendored
View File

@ -221,6 +221,10 @@ describe('ReactComponentLifeCycle', () => {
'unmounted component. This is a no-op.\n\nPlease check the code for the ' +
'StatefulComponent component.',
);
// Check deduplication
ReactTestUtils.renderIntoDocument(<StatefulComponent />);
expectDev(console.error.calls.count()).toBe(1);
});
it('should correctly determine if a component is mounted', () => {

13
packages/react-dom/src/__tests__/ReactCompositeComponent-test.js vendored
View File

@ -252,6 +252,9 @@ describe('ReactCompositeComponent', () => {
'component. This is a no-op.\n\nPlease check the code for the ' +
'Component component.',
);
instance.forceUpdate();
expectDev(console.error.calls.count()).toBe(1);
});
it('should warn about `setState` on unmounted components', () => {
@ -391,6 +394,11 @@ describe('ReactCompositeComponent', () => {
expect(instance).toBe(instance2);
expect(renderedState).toBe(1);
expect(instance2.state.value).toBe(1);
// Test deduplication
ReactDOM.unmountComponentAtNode(container);
ReactDOM.render(<Component prop={123} />, container);
expectDev(console.error.calls.count()).toBe(1);
});
it('should warn about `setState` in getChildContext', () => {
@ -424,6 +432,11 @@ describe('ReactCompositeComponent', () => {
expectDev(console.error.calls.argsFor(0)[0]).toBe(
'Warning: setState(...): Cannot call setState() inside getChildContext()',
);
// Test deduplication
ReactDOM.unmountComponentAtNode(container);
ReactDOM.render(<Component />, container);
expectDev(console.error.calls.count()).toBe(1);
});
it('should cleanup even if render() fatals', () => {

4
packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js vendored
View File

@ -421,6 +421,10 @@ describe('ReactCompositeComponent-state', () => {
"this.state is deprecated (except inside a component's constructor). " +
'Use setState instead.',
);
// Check deduplication
ReactDOM.render(<Test />, container);
expect(console.error.calls.count()).toEqual(1);
});
it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {

3
packages/react-dom/src/__tests__/ReactServerRendering-test.js vendored
View File

@ -656,8 +656,11 @@ describe('ReactDOMServer', () => {
' This usually means you called setState() outside componentWillMount() on the server.' +
' This is a no-op.\n\nPlease check the code for the Foo component.',
);
var markup = ReactDOMServer.renderToStaticMarkup(<Foo />);
expect(markup).toBe('<div>hello</div>');
jest.runOnlyPendingTimers();
expectDev(console.error.calls.count()).toBe(1);
});
it('warns with a no-op when an async forceUpdate is triggered', () => {

11
packages/react-dom/src/server/ReactPartialRenderer.js vendored
View File

@ -118,6 +118,7 @@ var didWarnDefaultChecked = false;
var didWarnDefaultSelectValue = false;
var didWarnDefaultTextareaValue = false;
var didWarnInvalidOptionChildren = false;
var didWarnAboutNoopUpdateForComponent = {};
var valuePropNames = ['value', 'defaultValue'];
var newlineEatingTags = {
listing: true,
@ -181,6 +182,13 @@ function warnNoop(
) {
if (__DEV__) {
var constructor = publicInstance.constructor;
const componentName =
(constructor && getComponentName(constructor)) || 'ReactClass';
const warningKey = `${componentName}.${callerName}`;
if (didWarnAboutNoopUpdateForComponent[warningKey]) {
return;
}
warning(
false,
'%s(...): Can only update a mounting component. ' +
@ -188,8 +196,9 @@ function warnNoop(
'This is a no-op.\n\nPlease check the code for the %s component.',
callerName,
callerName,
(constructor && getComponentName(constructor)) || 'ReactClass',
componentName,
);
didWarnAboutNoopUpdateForComponent[warningKey] = true;
}
}

19
packages/react-reconciler/src/ReactFiberClassComponent.js vendored
View File

@ -41,6 +41,7 @@ if (__DEV__) {
var warning = require('fbjs/lib/warning');
var {startPhaseTimer, stopPhaseTimer} = require('./ReactDebugFiberPerf');
var didWarnAboutStateAssignmentForComponent = {};
var warnOnInvalidCallback = function(callback: mixed, callerName: string) {
warning(
@ -393,13 +394,17 @@ module.exports = function(
if (instance.state !== oldState) {
if (__DEV__) {
warning(
false,
'%s.componentWillReceiveProps(): Assigning directly to ' +
"this.state is deprecated (except inside a component's " +
'constructor). Use setState instead.',
getComponentName(workInProgress),
);
const componentName = getComponentName(workInProgress) || 'Component';
if (!didWarnAboutStateAssignmentForComponent[componentName]) {
warning(
false,
'%s.componentWillReceiveProps(): Assigning directly to ' +
"this.state is deprecated (except inside a component's " +
'constructor). Use setState instead.',
componentName,
);
didWarnAboutStateAssignmentForComponent[componentName] = true;
}
}
updater.enqueueReplaceState(instance, instance.state, null);
}

32
packages/react-reconciler/src/ReactFiberScheduler.js vendored
View File

@ -101,34 +101,41 @@ if (__DEV__) {
} = require('./ReactDebugFiberPerf');
var didWarnAboutStateTransition = false;
var didWarnSetStateChildContext = false;
var didWarnStateUpdateForUnmountedComponent = {};
var warnAboutUpdateOnUnmounted = function(
instance: React$ComponentType<any>,
) {
const ctor = instance.constructor;
var warnAboutUpdateOnUnmounted = function(fiber: Fiber) {
const componentName = getComponentName(fiber) || 'ReactClass';
if (didWarnStateUpdateForUnmountedComponent[componentName]) {
return;
}
warning(
false,
'Can only update a mounted or mounting component. This usually means ' +
'you called setState, replaceState, or forceUpdate on an unmounted ' +
'component. This is a no-op.\n\nPlease check the code for the ' +
'%s component.',
(ctor && (ctor.displayName || ctor.name)) || 'ReactClass',
'Can only update a mounted or mounting ' +
'component. This usually means you called setState, replaceState, ' +
'or forceUpdate on an unmounted component. This is a no-op.\n\nPlease ' +
'check the code for the %s component.',
componentName,
);
didWarnStateUpdateForUnmountedComponent[componentName] = true;
};
var warnAboutInvalidUpdates = function(instance: React$ComponentType<any>) {
var warnAboutInvalidUpdates = function(instance: React$Component<any>) {
switch (ReactDebugCurrentFiber.phase) {
case 'getChildContext':
if (didWarnSetStateChildContext) {
return;
}
warning(
false,
'setState(...): Cannot call setState() inside getChildContext()',
);
didWarnSetStateChildContext = true;
break;
case 'render':
if (didWarnAboutStateTransition) {
return;
}
didWarnAboutStateTransition = true;
warning(
false,
'Cannot update during an existing state transition (such as within ' +
@ -136,6 +143,7 @@ if (__DEV__) {
'be a pure function of props and state; constructor side-effects are ' +
'an anti-pattern, but can be moved to `componentWillMount`.',
);
didWarnAboutStateTransition = true;
break;
}
};
@ -1229,7 +1237,7 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(
} else {
if (__DEV__) {
if (!isErrorRecovery && fiber.tag === ClassComponent) {
warnAboutUpdateOnUnmounted(fiber.stateNode);
warnAboutUpdateOnUnmounted(fiber);
}
}
return;

7
packages/react-reconciler/src/ReactFiberUpdateQueue.js vendored
View File

@ -20,6 +20,7 @@ const {NoWork} = require('./ReactFiberExpirationTime');
if (__DEV__) {
var warning = require('fbjs/lib/warning');
var didWarnUpdateInsideUpdate = false;
}
type PartialState<State, Props> =
@ -132,7 +133,10 @@ function insertUpdateIntoFiber<State>(
// Warn if an update is scheduled from inside an updater function.
if (__DEV__) {
if (queue1.isProcessing || (queue2 !== null && queue2.isProcessing)) {
if (
(queue1.isProcessing || (queue2 !== null && queue2.isProcessing)) &&
!didWarnUpdateInsideUpdate
) {
warning(
false,
'An update (setState, replaceState, or forceUpdate) was scheduled ' +
@ -140,6 +144,7 @@ function insertUpdateIntoFiber<State>(
'with zero side-effects. Consider using componentDidUpdate or a ' +
'callback.',
);
didWarnUpdateInsideUpdate = true;
}
}

15
packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js vendored
View File

@ -341,6 +341,19 @@ describe('ReactIncrementalUpdates', () => {
expect(instance.state).toEqual({a: 'a', b: 'b'});
expectDev(console.error.calls.count()).toBe(1);
console.error.calls.reset();
expectDev(console.error.calls.argsFor(0)[0]).toContain(
'An update (setState, replaceState, or forceUpdate) was scheduled ' +
'from inside an update function. Update functions should be pure, ' +
'with zero side-effects. Consider using componentDidUpdate or a ' +
'callback.',
);
// Test deduplication
instance.setState(function a() {
this.setState({a: 'a'});
return {b: 'b'};
});
ReactNoop.flush();
expectDev(console.error.calls.count()).toBe(1);
});
});

12
packages/react/src/ReactNoopUpdateQueue.js
View File

@ -9,11 +9,19 @@
if (__DEV__) {
var warning = require('fbjs/lib/warning');
var didWarnStateUpdateForUnmountedComponent = {};
}
function warnNoop(publicInstance, callerName) {
if (__DEV__) {
var constructor = publicInstance.constructor;
const componentName =
(constructor && (constructor.displayName || constructor.name)) ||
'ReactClass';
const warningKey = `${componentName}.${callerName}`;
if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
return;
}
warning(
false,
'%s(...): Can only update a mounted or mounting component. ' +
@ -21,9 +29,9 @@ function warnNoop(publicInstance, callerName) {
'This is a no-op.\n\nPlease check the code for the %s component.',
callerName,
callerName,
(constructor && (constructor.displayName || constructor.name)) ||
'ReactClass',
componentName,
);
didWarnStateUpdateForUnmountedComponent[warningKey] = true;
}
}