IntelliJ显示this.props未定义，而console.log建议否则

Question

我有一个基于用React和mobx编写的material-ui的对话框，我对mobx + react很陌生，试图在这里理解其生命周期。

该组件看起来像这样：

@observer
export default class AddDialog extends React.Component {

    constructor(store, props) {
        super(props);
        this.store = store;
    }

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

    handleDateChange = (e, date) => {
        this.props.store.setDate(date);
    }

    handleTitleChange = (e, title) => {
        this.props.store.setTitle(title);
    }

    render() {
        const actions = [
            <FlatButton
                label="Ok"
                primary={true}
                keyboardFocused={true}
                onClick={this.handleClose}
            />,
        ];

        return (
            <div>
                <Dialog
                    title="Title"
                    actions={actions}
                    modal={false}
                    open={this.props.store.open}
                    onRequestClose={this.handleClose}
                >
                    <TextField hintText="title?" onChange={this.handleTitleChange}/>
                    <DatePicker hintText="Due date" onChange={this.handleDateChange}/>
                </Dialog>
            </div>
        );
    }
}

在App.js我有一个如下代码：

@observer
class App extends PureComponent {
    render() {
        return (
            <MuiThemeProvider>
                <FloatingActionButton onClick={this.handleOpenAddPromissDialog}>
                    <ContentAdd />
                </FloatingActionButton>
                <AddPromissDialog store={this.props.addPromissStore} open={false}/>
            </MuiThemeProvider>
        );
    }
}

当我调试代码时，看起来传递给构造函数的store和props args都使用在render函数中传递的值进行了初始化。 但是，当handleClose被调用时， this.props和this.store都未定义。 我不明白我在这里想念的是什么。

编辑：我尝试将变量打印到控制台，在那里它们不会像未定义的那样出现，而是按照我的期望进行填充。 因此它看起来像和IntelliJ问题。

那就是我正在使用的调试配置：

Answer 1

问题是由Babel在箭头功能中转换this的方式引起的：在转换的代码_this其更改为_this ，并且未提供名称映射：

在Chrome开发工具（使用与WebStorm相同的API进行调试的API）中进行调试时，您会遇到相同的问题：

使用Chrome Devtools和类似的报告调试Babel转译的React时，看到“ this”的值不正确