MobX：@observale 不会唤起渲染

Question

我正在尝试构建一个视图，如果单击某个元素，就会显示子节点。只要我在我的 onClick 事件中调用 this.forceUpdate(); 一切正常。我想要做的是将我的数据作为一个可观察的数组，这样它的任何变化都会引起 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 函数在某处引用 obserbable 时才会触发重新渲染。

这里有一篇关于如何将 mobx 用于组件本地状态的古老但很好的文章：https://blog.cloudboost.io/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e

MobX：@observale 不会唤起渲染

MobX: @observale won't evoke render

reactjs

mobx

mobx-react