Uncaught TypeError: Cannot add property Symbol(isMobXReactObserver), object is not extensible

[xulayen]

I try to set it dynamically for the current component and its subcomponents observer. so , was wrong!

In react, dynamically set the observer mode for each component and self component. An error is reported:

import React from 'react';
import HomeIndex from '../pages/home';
import { observer } from "mobx-react";

export default [
    {
        path: "/",
        component: Building(HomeIndex),
        title: '首页'
    }
];

function Building(com: any) {
    console.log(com());

    React.Children.forEach(com().props.children, (child, index) => {
        observer(child);//this ERROR!!!!
        console.log(child);
    });

    return observer(com);
}

reactBatchedUpdates.js:1 Uncaught TypeError: Cannot add property Symbol(isMobXReactObserver), object is not extensible
    at makeClassComponentObserver (reactBatchedUpdates.js:1)
    at observer (reactBatchedUpdates.js:1)
    at routes.ts:18
    at forEachSingleChild (react.development.js:1118)
    at traverseAllChildrenImpl (react.development.js:1007)
    at traverseAllChildrenImpl (react.development.js:1023)
    at traverseAllChildren (react.development.js:1092)
    at Object.forEachChildren [as forEach] (react.development.js:1140)
    at Building (routes.ts:17)
    at Module../src/route/routes.ts (routes.ts:8)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/route/index.tsx (home.tsx:14)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.tsx (index.css?c60c:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (index.ts:5)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

[mweststrate]

Your example doesn't specify what com is, but observer should be applied at declaration time, not at usage time. For details see https://mobx.js.org/refguide/observer-component.html.

Will close the issue soon unless a test project is provided and the question is rephrased in English.

[xulayen]

Your example doesn't specify what com is, but observer should be applied at declaration time, not at usage time. For details see https://mobx.js.org/refguide/observer-component.html.

Will close the issue soon unless a test project is provided and the question is rephrased in English.

thank you for anwer me! the com is a react component in the context. I try to set it dynamically for the current component and its subcomponents observer. so , was wrong!