Установите местное государство в соответствии с состоянием Mobx

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, если вы хотите, чтобы переменная вызывала ваш рендеринг, вы должны использовать observable, так что похоже, что вам вообще не нужно использовать состояние в этом случае, потому что observable вызовет рендеринг, и в вашей функции рендеринга выдолжен спросить, если отчет не является нулевым, и если это так, просто откройте ваш мод, не меняя вашего состояния.я что-то пропустил?