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

只有当render函数在某处引用 obserbable 时，

mobx才会触发重新渲染。

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

MobX：@observale不会唤起渲染

1 个答案: