MobX: @observale не будет вызывать рендер

Question

Я пытаюсь создать представление, в котором при нажатии на элемент отображаются дочерние узлы.Все работает нормально, пока я звоню this.forceUpdate(); в моем событии onClick.Я хочу, чтобы мои данные были в виде наблюдаемого массива, чтобы любые изменения в нем вызывали render().Однако для простоты я объявляю @observable boolean и переключаю значения для вызова рендера.Однако при изменении значения render() не вызывается.Что я тут не так делаю?

мой код:

@observer
export class TreeView extends React.Component<RouteComponentProps<{}>> {
    @observable toggle = false;
    constructor(props: any) {
        super(props);
    }

    public renderChildrenNodes = (e) => {
        const id = e.currentTarget.id;
        if(!id) {
            return;
        }
        let item: INode = this.props.data.find(item => item.Name === id );
        if(item) {
            item.Show = !item.Show;
            this.toggle = !this.toggle;
            // USE MOBX
            // this.forceUpdate();
        }
    }

    public render() {
        const data = this.props.data;
        if (!data) {
            return null;
        }
        return(
            <ul className="no-padding">
                {data.map((item,itr) => {
                    return (
                        <li className="list-style" key={itr}>
                            <div id={item.Name} className="box" onClick={this.renderChildrenNodes}>
                                {item.Name}
                            </div>
                            {item.Show ? <TreeView data={item.ChildNodes} /> : null}
                        </li>
                    );
                })}
            </ul>
        );
    }
}

Answer 1

mobx вызывает повторную визуализацию, только если ваша функция render ссылается на наблюдаемый где-то.

Вот старая, но хорошая статья о том, как использовать mobx для локального состояния компонента:https://blog.cloudboost.io/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e