[英]IntelliJ shows this.props is undefined while console.log suggests otherwise
I have a dialog based on material-ui written with React and mobx, I'm pretty new to mobx+react and trying to understand the lifecycle here. 我有一个基于用React和mobx编写的material-ui的对话框,我对mobx + react很陌生,试图在这里理解其生命周期。
The component looks something like this: 该组件看起来像这样:
@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>
);
}
}
And in App.js
I have a code that looks like this: 在App.js
我有一个如下代码:
@observer
class App extends PureComponent {
render() {
return (
<MuiThemeProvider>
<FloatingActionButton onClick={this.handleOpenAddPromissDialog}>
<ContentAdd />
</FloatingActionButton>
<AddPromissDialog store={this.props.addPromissStore} open={false}/>
</MuiThemeProvider>
);
}
}
When I debug the code, it looks like both the store
and props
args that are passed to the constructor are initialized with the values passed in the render
function. 当我调试代码时,看起来传递给构造函数的store
和props
args都使用在render
函数中传递的值进行了初始化。 But when the handleClose
is called both this.props
and this.store
are undefined. 但是,当handleClose
被调用时, this.props
和this.store
都未定义。 I can't understand what I'm missing here. 我不明白我在这里想念的是什么。
Edit: I tried printing the variables to the console, and there they don't appear as undefined but populated as I would expect. 编辑:我尝试将变量打印到控制台,在那里它们不会像未定义的那样出现,而是按照我的期望进行填充。 So it looks like and IntelliJ issue. 因此它看起来像和IntelliJ问题。
the problem is caused by the way Babel transpiles this
in arrow functions: it is changed to _this
in transpiled code, and no name mappings are provided: 问题是由Babel在箭头功能中转换this
的方式引起的:在转换的代码_this
其更改为_this
,并且未提供名称映射:
You will face the same issue when debugging in Chrome Dev Tools (that use the same API as WebStorm for debugging): 在Chrome开发工具(使用与WebStorm相同的API进行调试的API)中进行调试时,您会遇到相同的问题:
See Value of "this" is incorrect when debugging Babel transpiled React with Chrome Devtools and similar reports 使用Chrome Devtools和类似的报告调试Babel转译的React时,看到“ this”的值不正确
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.