React + Mobx：不会触发渲染

Question

当我更新Mobx存储的属性时，值会更新，但不会触发渲染。

我的商店

@observable leftAsideActive = 4;
@observable rightAsideActive = false;

@action setAsideState(side, active) {
    if(side == UI_LEFT){ this.leftAsideActive = active};
    if(side == UI_RIGHT){ this.rightAsideActive = active};
}

getLeftState(){
    return this.leftAsideActive;
}

我的观点基本上就是这样

class IOManagerView extends React.Component {
constructor(props){
    super(props);
}

render() {
    const { inputFiles, leftIsActive, handleFileChosen, activeLeft } = this.props;

    return (
        {leftIsActive + " "}
    )
}

从我的控制器

class IOManagerController extends React.Component {
constructor(props){
    super(props);
    this.state = {
        displayed: true
    }

    this.handleFileChosen = this.handleFileChosen.bind(this);
    this.activeLeft = this.activeLeft.bind(this);
}

activeLeft(){
    this.props.UI.activeLeft();
}

render() {
    const { inputFiles, UI } = this.props;
    return (
        <IOManagerView 
            leftIsActive={UI.leftState()}

            activeLeft={this.activeLeft}
        />
    )
}
}

如果我在运行UI.leftState()之前和之后检查this.props.UI.activeLeft();的值，那么我可以看到值很好更新

奇怪的是，我有另一个完美的动作和重新渲染。我比较了两个设置文件，他们是双胞胎

Answer 1

您必须确保使用observable的组件使用@observer装饰器，以便在可观察的更改时它们将重新呈现。

@observer
class IOManagerView extends React.Component {
  // ...
}

@observer
class IOManagerController extends React.Component {
  // ...
}