javascript - 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 参数都是使用 render 中传递的值进行初始化的 函数。但是，当调用 handleClose 时，this.props 和 this.store 都未定义。我不明白我在这里缺少什么。

编辑:我尝试将变量打印到控制台，它们并没有显示为未定义，而是按照我的预期填充。所以它看起来像 IntelliJ 问题。

这是我正在使用的调试配置:

Answer 1

问题是由 Babel 在箭头函数中转译 this 的方式引起的:在转译代码中它被更改为 _this，并且没有提供名称映射:

在 Chrome 开发工具(使用与 WebStorm 相同的 API 进行调试)中进行调试时，您将面临同样的问题:

参见Value of "this" is incorrect when debugging Babel transpiled React with Chrome Devtools和类似的报告