Question

我有一个基于材料-ui的对话框，用React和mobx编写，我对mobx +做出反应并尝试理解这里的生命周期。

该组件看起来像这样：

@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问题一样。

我使用的调试配置： One Drive sharepoint link to zip file

Answer 1

问题是由Babel在箭头函数中转换_this的方式引起的：它在转换后的代码中更改为return $query->whereDoesntHave('participations', function($query) use ($customerId) { $query->where('customer_id', $customerId); }，并且没有提供名称映射：

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

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

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

1 个答案: