chiester
commented
7 years ago Disregard. I tracked down the problem in my data and code.
Closed chiester closed 7 years ago
chiester
commented
7 years ago Disregard. I tracked down the problem in my data and code.
abhinavsinghvi
commented
6 years ago what was the fix, I am also facing same problem.
I have parent component that has a FixedDataTable as a child. The parent component also has a button as a child. The button passes a method from the parent. When the button is pressed, there is an async method and when it returns, I call the method in the parent to update its state. This is standard and done the way the React team seems to recommend (see "this is the standard way" reply here, https://discuss.reactjs.org/t/is-this-a-decent-pattern-to-update-parent-state-from-children/560).
As soon as I introduced this change, which really has nothing whatsoever to do with the FixedDataTable (that happens to also be a child of the same parent), went haywire. It generates:
invariant.js:38 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {_store, _owner, ref, key, props}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
FixedDataTableCellDefault.invariant @ invariant.js:38traverseAllChildrenImpl @ traverseAllChildren.js:136traverseAllChildren @ traverseAllChildren.js:164flattenChildren @ flattenChildren.js:67_reconcilerUpdateChildren @ ReactMultiChild.js:206_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126_updateRenderedComponent @ ReactCompositeComponent.js:751_performComponentUpdate @ ReactCompositeComponent.js:721updateComponent @ ReactCompositeComponent.js:642receiveComponent @ ReactCompositeComponent.js:544receiveComponent @ ReactReconciler.js:126updateChildren @ ReactChildReconciler.js:110_reconcilerUpdateChildren @ ReactMultiChild.js:210_updateChildren @ ReactMultiChild.js:314updateChildren @ ReactMultiChild.js:301_updateDOMChildren @ ReactDOMComponent.js:942updateComponent @ ReactDOMComponent.js:760receiveComponent @ ReactDOMComponent.js:718 2warning.js:36 Warning: performUpdateIfNecessary: Unexpected batch number (current 272, pending 269)printWarning @ warning.js:36warning @ warning.js:60performUpdateIfNecessary @ ReactReconciler.js:150runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150And then lots of these:
warning.js:36 Warning: performUpdateIfNecessary: Unexpected batch number (current 273, pending 269)printWarning @ warning.js:36warning @ warning.js:60performUpdateIfNecessary @ ReactReconciler.js:150runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150 2warning.js:36 Warning: performUpdateIfNecessary: Unexpected batch number (current 274, pending 269)printWarning @ warning.js:36warning @ warning.js:60performUpdateIfNecessary @ ReactReconciler.js:150runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150