React Mobx在商店更改后不会更新视图

Question

我刚刚开始使用Mobx。我喜欢Mobx，它在我项目的大部分时间都有用。但是，我无法让看似简单的东西上班。 在我更改SelectField中的需求后，我在onChange事件中将新值设置为store.selectedRequirement。 onChange事件被成功调用，并且存储值已更新。但是，SelectField视图从未更新，它仍然指向旧项目。我无法弄清楚原因。

@observer
export default class OpenDialog extends Component {
    static propTypes = {
        store: PropTypes.object.isRequired
    }   

    static contextTypes = {
        router: React.PropTypes.object.isRequired       
    }

    handleClose = () => {
        this.props.store.openDialog = false;
    }

    componentWillMount = () => {
        const { store } = this.props;
        if(store.selectedRequirement === null)
            store.selectedRequirement = store.requirements[0];
    }

    render = () => {

        const { store } = this.props;

        const actions = [
              <RaisedButton
                label="Cancel"
                style={{marginRight: 16}}
                primary={true}
                onTouchTap={this.handleClose}
              />,
            ];

        const docItemsJSX = store.requirements
            .map((requirement) => {
                return (
                    <MenuItem   
                        key={'requirement-' + requirement.docId}
                        value={requirement}
                        primaryText={requirement.title + ' - ' + requirement.version}>
                    </MenuItem> 
                )                   
            }); 

        return (
            <Dialog
                    title="Open Requirements Document"
                    actions={actions}
                    modal={true}
                    open={store.openDialog}
                >

                <SelectField
                    style={{width: 300}}
                    floatingLabelText="Documents"
                    floatingLabelFixed={true}
                    value={store.selectedRequirement}
                    onChange={(event, index, value) => { 
                        store.selectedRequirement = value;
                    }}
                >
                    {docItemsJSX}
                </SelectField>

            </Dialog>       
        );
    }
}

在AppStore文件中，我有

@observable requirements = [{
    docId: 1,
    title: "Requirements1",
    version: "1.0",
    lastModifiedBy: "abc",
    lastModifiedDate: "11/11/2016",
    publishDate: "11/12/2016"
}, {
    docId: 2,
    title: "Requirements2",
    version: "1.0",
    lastModifiedBy: "def",
    lastModifiedDate: "11/13/2016",
    publishDate: "11/16/2016"
}];

@observable selectedRequirement = null;
@observable openDialog = false;