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”的值不正確