Question

在组件中，我想根据Mobx状态打开一个模态。但我对此感到困惑。

在Mobx中，我有一个返回报告的计算函数。

@observable report= null;
@computed get getErrorReport(){return this.report}

并且在组件中，如果有错误，我想打开一个模式，为此我需要设置状态模态标志。

render() { 
    const { getErrorReport } = this.props.myStore!;
    if(getErrorReport) {this.setState({modalOpen:true})}
    .....
}

当然，此更新是错误的。通常，在这些情况下，我们需要setState进行渲染，应该采用什么方法？

Answer 1

您可能希望以这种方式来构造代码。

class MyStore {
    @observable report = null;
    // You do not need a @computed here just to return a property - access it 
    // directly
}


@inject('myStore')  // myStore is an instance of MyStore that you passed to Provider
@observer // observer will trigger a rerender if any observable prop change (report 
          // in your case)
class MyReactComponent extends React.Component {

// so you do not need a set state here 

    render() {
         // Your modal component may differ, this is example
        return (<Modal isOpened={this.props.myStore.report} />)
    }

}

Answer 2

根据mobx文档，如果您希望变量触发渲染，则应使用可观察的，因此您似乎根本不需要使用状态，因为可观察会触发渲染，并且在您的渲染函数中，应该询问报告是否不为空，如果是，则只打开模式而不更改状态。我想念什么吗？

根据Mobx状态设置本地状态

2 个答案: