Question

在下面提供的代码中，我可以看到this.mBaseService是在第一个debugger上方定义的，而不是在第二个debugger下定义的。

有人能解释为什么会这样吗？我有一个理论是React或Next.js可能在内部清除属性。

    import Link from 'next/link';
    import React, { Component, Fragment } from 'react';

    import ReactDropzone from 'react-dropzone';
    import { Container, Row, Col, Button, Jumbotron, ListGroup, ListGroupItem } from 'reactstrap';

    import DefaultHomeView from '../components/default-home-view';
    import Page from '../components/page';
    import EteeReport from '../components/etee-report';
    import Layout from '../components/layout';
    import { ServiceBaseService } from '../services/service-base/service-base.service';

    export default class extends Page {
        mBaseService = new ServiceBaseService();

        constructor(props) {
            super(props);

            this.state = {
                files: [],
            };

            console.log('it exists!', this.mBaseService);
            debugger;
            //this.mBaseService = new ServiceBaseService();
        }

        fHandleOnDrop = async files => {
            debugger;
            const oResponse = await this.mBaseService.fpPost('/reports', {
                oDataToPost: JSON.stringify(files),
            });

            // TODO: if valid csv then parse and chart the data
            this.setState({
                files: this.state.files.concat(files),
            });
        };

        fClearFiles = () => {
            this.setState({
                files: [],
            });
        };

        render() {
            return (
                <Layout {...this.props} navmenu={false} container={false}>
                    {!this.state.files.length && (
                        <DefaultHomeView {...this.props} fHandleOnDrop={this.fHandleOnDrop} files={this.state.files} />
                    )}
                    {this.state.files.length && <EteeReport {...this.props} {...this.state} fClearFiles={this.fClearFiles} />}
                </Layout>
            );
        }
    }

Answer 1

此问题可能特定于如何使用Babel编译代码。如this related answer中所述，类字段（箭头方法）被转换为构造函数代码，而this被_this，_this2等替换。 this在箭头中的行为。

属性可能无法在调试器中的this上使用，而不能在临时_this?变量上使用，该变量在原始代码中被视为适当的上下文。

在这种特定情况下，这是由于fHandleOnDrop作为回调传递的事实引起的：

<DefaultHomeView {...this.props} fHandleOnDrop={this.fHandleOnDrop} files={this.state.files} />

这意味着this.props.fHandleOnDrop()已被取消引用并以错误的this调用，而该函数内部使用_this?变量来引用适当的上下文：

    fHandleOnDrop = async files => {
        console.log(this.mBaseService) // should be ok
        eval('console.log(this.mBaseService)') // should fail

如果Babel配置为不通过不使用es2015预设将箭头向ES5目标弹射的话，情况可能并非如此。

不管这些担忧如何，总是有这种行为特定于特定开发工具的可能性。

React或Next.js是否在内部清理类属性？

1 个答案: