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}
        />
    )
}
}

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

奇怪的是，我有另一个可以完美地用于动作和重新渲染。我比较了两个定档，他们是双胞胎

Answer 1

您必须确保使用 observable 的组件使用 @observer 装饰器，以便它们在 observable 发生变化时重新呈现。

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

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

React + Mobx：不触发渲染

React + Mobx : the render is not triggered

rendering

reactjs

mobx

mobx-react