forceUpdate: Can only update a mounted or mounting component. about mobx-react HOT 12 CLOSED

Could you share the details of setHighlightedId and the onMouseEnter
event relevant for this issue?

On Wed, Dec 16, 2015 at 3:38 AM, thunderkid [email protected]
wrote:

Hi. I'm getting the warning below in the console log.

My app has a table with a detail view next to it. The detail view shows
the selected table row. The table also highlights the row under the mouse.
As notifications arrive from the server, some items will disappear from the
table. All this works fine, except for the warning.

I think it happens when the mouse is over the selected table row and the
selected item disappears as instructed by the server. It looks as though
it's trying to then update the detail view, which has disappeared. I'm
using react and mobservable in the obvious way, so I'm wondering whether
this should be handled differently by mobservable somehow?

warning.js:45 Warning: forceUpdate(...): Can only update a mounted or mounting component. This usually means you called forceUpdate() on an unmounted component. This is a no-op. Please check the code for the undefined component.

warning @ warning.js:45
getInternalInstanceReadyForUpdate @ ReactUpdateQueue.js:34
ReactUpdateQueue.enqueueForceUpdate @ ReactUpdateQueue.js:135
ReactComponent.forceUpdate @ ReactComponent.js:86
reactiveRender @ index.js:60
ObservableView.compute @ observableview.js:57
(anonymous function) @ dnode.js:198
withStrict @ core.js:301
ViewNode.computeNextState @ dnode.js:197
ViewNode.notifyStateChange @ dnode.js:182
DataNode.notifyObservers @ dnode.js:113
DataNode.markReady @ dnode.js:107
ObservableValue.set @ observablevalue.js:34
ObservableObject.defineReactiveProperty.Object.defineProperty.set @ observableobject.js:61
ListVModelMasterObservable.setHighlightedId @ listViewModelObservable.ts:182
TableRow.render.React.createElement.onMouseEnter @ choresByReact.tsx:121
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71
executeDispatch @ EventPluginUtils.js:79
executeDispatchesInOrder @ EventPluginUtils.js:102
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated @ forEachAccumulated.js:23
EventPluginHub.processEventQueue @ EventPluginHub.js:259
runEventQueueInBatch @ ReactEventEmitterMixin.js:18
ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:34
handleTopLevelWithoutPath @ ReactEventListener.js:93
handleTopLevelImpl @ ReactEventListener.js:73
Mixin.perform @ Transaction.js:136
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:94
ReactEventListener.dispatchEvent @ ReactEventListener.js:204

—
Reply to this email directly or view it on GitHub
#12.

from mobx-react.

The onMouseEnter appears in my TableRow component:

@observer
class TableRow extends Component<{key: string, item: any, vMod: ViewModel}, {}> {
    render() {
        var item = this.props.item;
        var vMod = this.props.vMod;
        var className = '';
        if (vMod.selectedId == item.id) className += ' selected';
        if (vMod.highlightedId == item.id) className += ' highlighted';  
        return <tr onClick={ () => vMod.setSelectedId(item.id) }
                    onMouseEnter={ () => vMod.setHighlightedId(item.id) }
                    onMouseLeave={ () => vMod.setHighlightedId(null) }
                    className ={ className } >
                        <td>{item.id}</td>
                        <td>{item.description}</td>
                        <td>{item.progress}</td>
               </tr>
    }
}

And my ViewModel contains setHighlightedId. So basically.:

class ViewModel {
    dataMap: ObservableMap<Chore>;
    @observable
    highlightedId: string;
    @observable
    selectedId: string;    

    setHighlightedId(id: string) {
        this.highlightedId = id;
}

I've just tried to follow what I thought was the standard React/mobservable approach.

from mobx-react.

Looks fine to me! Can you provide a simple reproduction? That would be convenient, otherwise I'll try myself to mimic the same setup.

from mobx-react.

Well, it's currently running against a server to update the table. It polls
the server once per second, and during this update some elements may
disappear. So I'd have to write a setTimeout function that would update the
table once per second and remove random elements. If you need me to, I'll
try, but it will take a bit of fiddling around.

On Wed, Dec 16, 2015 at 11:13 AM, Michel Weststrate <
[email protected]> wrote:

Looks fine to me! Can you provide a simple reproduction? That would be
convenient, otherwise I'll try myself to mimic the same setup.

—
Reply to this email directly or view it on GitHub
#12 (comment)
.

from mobx-react.

Ok, I'll first try to reproduce it myself.

On Wed, Dec 16, 2015 at 8:37 PM, thunderkid [email protected]
wrote:

Well, it's currently running against a server to update the table. It polls
the server once per second, and during this update some elements may
disappear. So I'd have to write a setTimeout function that would update the
table once per second and remove random elements. If you need me to, I'll
try, but it will take a bit of fiddling around.

On Wed, Dec 16, 2015 at 11:13 AM, Michel Weststrate <
[email protected]> wrote:

Looks fine to me! Can you provide a simple reproduction? That would be
convenient, otherwise I'll try myself to mimic the same setup.

—
Reply to this email directly or view it on GitHub
<
#12 (comment)

.

—
Reply to this email directly or view it on GitHub
#12 (comment)
.

from mobx-react.

Ok, I've finally managed to build a toy version of this problem (tested on Chrome 47.02526 and other close Chromes). Load this, open the console log, click 'Go!', and keep moving your mouse back and forth over the scrolling column. In the console log you'll see a bunch of forceUpdate() errors.

I believe this only happens when you have both the table and also the tablerow as @observable.

Please let me know if you get the same errors.

mobservableForceUpdate.zip

from mobx-react.

Thanks! Tried to reproduce it myself but that didn't work so far, but I could reproduce it with your example so I'll investigate further.

from mobx-react.

Could you verify whether version 2.1.1 fixes this issue?

from mobx-react.

Yes, this seems to fix the issue, both for my toy example and for my full app running against the server. Thank you!

from mobx-react.

Hi, I'm getting the same warning trying to fire an async action in a component which is being rendered on the server.

I'm trying to solve the problem of waiting for async actions to complete on the server, so the full rendered app is sent back to the client. But of course when an async action completes, the renderToStaticMarkup has already completed, thus the error.

Any thoughts on this? Could you recommend a workaround for the warning, or do you think the idea in general is just not possible?

from mobx-react.

this might be interesting: https://www.npmjs.com/package/mobx-server-wait

Op di 27 sep. 2016 23:19 schreef Ali Sheehan-Dare <[email protected]

:

Hi, I'm getting the same warning trying to fire an async action in a
component which is being rendered on the server.

I'm trying to solve the problem of waiting for async actions to complete
on the server, so the full rendered app is sent back to the client. But
of course when an async action completes, the renderToStaticMarkup has
already completed, thus the error.

Any thoughts on this? Could you recommend a workaround for the warning, or
do you think the idea in general is just not possible?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#12 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhDi-THdkwReGvvoF0v0NQF8Tquujks5quYhXgaJpZM4G2MJ3
.

from mobx-react.

Yeah looks interesting. Thanks, I'll take a look.

from mobx-react.