Support assigning directly to this.state inside cWRP
We don't explicitly support this but it happens to work in Stack. We'll give it the same semantics as replaceState.
Andrew Clark committed
Feb 21, 2017 at 14:29 UTC
d98a3d92697eeb9d1d5dc3ffd7e4abf7fddf45c9
2 files changed
+30
src/renderers/__tests__/ReactCompositeComponentState-test.js
+26
@@ -414,4 +414,30 @@ describe('ReactCompositeComponent-state', () => {
414
'scu from a,b to a,b,c',
415
]);
416
});
417
+
418
+ it('should treat assigning to this.state inside cWRP as a replaceState, with a warning', () => {
419
+ let ops = [];
420
+ class Test extends React.Component {
421
+ state = { step: 1, extra: true };
422
+ componentWillReceiveProps() {
423
+ this.setState({ step: 2 }, () => {
424
+ // Tests that earlier setState callbacks are not dropped
425
+ ops.push(`step: ${this.state.step}, extra: ${!!this.state.extra}`);
426
+ });
427
+ // Treat like replaceState
428
+ this.state = { step: 3 };
429
+ }
430
+ render() {
431
+ return null;
432
+ }
433
+ }
434
+
435
+ // Mount
436
+ const container = document.createElement('div');
437
+ ReactDOM.render(<Test />, container);
438
+ // Update
439
+ ReactDOM.render(<Test />, container);
440
+
441
+ expect(ops).toEqual(['step: 3, extra: false']);
442
+ });
443
});
src/renderers/shared/fiber/ReactFiberClassComponent.js
+4
@@ -408,6 +408,10 @@ module.exports = function(
408
if (oldProps !== newProps || oldContext !== newContext) {
409
if (typeof instance.componentWillReceiveProps === 'function') {
410
instance.componentWillReceiveProps(newProps, newContext);
411
+
412
+ if (instance.state !== workInProgress.memoizedState) {
413
+ updater.enqueueReplaceState(instance, instance.state, null);
414
+ }
415
}
416
}
417