Javascript – Fehler melden mit React

Question

Fehler:
Modal: isMounted ist veraltet. Stellen Sie stattdessen sicher, dass Sie Abonnements und ausstehende Anforderungen in ComponentWillUnmount bereinigen, um Speicherlecks zu verhindern.

class NewGateway extends React.Component {
    constructor(props) {
        super(props);
        this.state = {errmsg: '', selectedValue: '2'};

        // This binding is necessary to make `this` work in the callback
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({selectedValue: event.target.value});
    }

    handleSubmit(e) {
        var _this = this;

        console.log("submit...");
        var gw = form2json('#newGatewayForm');
        console.log("gw", gw);

        if (!gw.name || !gw.realm) {
            this.setState({errmsg: "Mandatory fields left blank"});
            return;
        }

        xFetchJSON("/api/gateways", {
            method:"POST",
            body: JSON.stringify(gw)
        }).then((obj) => {
            gw.id = obj.id;
            _this.props.handleNewGatewayAdded(gw);
        }).catch((msg) => {
            console.error("gateway", msg);
            _this.setState({errmsg: '' + msg + ''});
        });
    }

    render() {
        console.log(this.props);

        const props = Object.assign({}, this.props);
        const gateways = props.gateways;
        const sip_profiles = props.sip_profiles;
        delete props.gateways;
        delete props.sip_profiles;
        delete props.handleNewGatewayAdded;

        const gateways_options = gateways.map(gw => {
            return <option value={gw.id} key={gw.id}>Gateway[{gw.name}]</option>
        });

        return <Modal {...props} aria-labelledby="contained-modal-title-lg">
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-lg"><T.span text="Create New Gateway" /></Modal.Title>
            </Modal.Header>
            <Modal.Body>
            <Form horizontal id="newGatewayForm">
                <FormGroup controlId="formName">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Name" className="mandatory"/></Col>
                    <Col sm={10}><FormControl type="input" name="name" placeholder="gw1" /></Col>
                </FormGroup>

                <FormGroup controlId="formRealm">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Server" className="mandatory"/></Col>
                    <Col sm={10}><FormControl type="input" name="realm" placeholder="example.com" /></Col>
                </FormGroup>

                <FormGroup controlId="formUsername">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Username" className="mandatory"/></Col>
                    <Col sm={10}><FormControl type="input" name="username" placeholder="username" /></Col>
                </FormGroup>

                <FormGroup controlId="formPassword">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Password" className="mandatory"/></Col>
                    <Col sm={10}><FormControl type="password" name="password" placeholder="a$veryComplicated-Passw0rd" /></Col>
                </FormGroup>

                <FormGroup controlId="formDescription">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Description"/></Col>
                    <Col sm={10}><FormControl type="input" name="description" placeholder="Description ..." /></Col>
                </FormGroup>

                <FormGroup controlId="formSipProfile">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="SIP Profile"/></Col>
                    <Col sm={10}>
                        <FormControl componentClass="select" name="profile_id" value={this.state.selectedValue} onChange={this.handleChange}>
                            <option value="2">public</option>
                            <option value="1">default</option>
                        </FormControl>
                    </Col>
                </FormGroup>

                <FormGroup controlId="formTemplate">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Template"/></Col>
                    <Col sm={10}>
                        <FormControl componentClass="select" name="template">
                            <option value="default">Default</option>
                            {gateways_options}
                        </FormControl>
                    </Col>
                </FormGroup>

                <FormGroup controlId="formRegister">
                    <Col componentClass={ControlLabel} sm={2}><T.span text="Register"/></Col>
                    <Col sm={10}>
                        <Radio name="register" value="yes" inline><T.span text="yes"/></Radio>
                        <Radio name="register" value="no" inline><T.span text="no"/></Radio>
                    </Col>
                </FormGroup>

                <FormGroup>
                    <Col smOffset={2} sm={10}>
                        <Button type="button" bsStyle="primary" onClick={this.handleSubmit}>
                            <i className="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;
                            <T.span text="Save" />
                        </Button>
                        &nbsp;&nbsp;<T.span className="danger" text={this.state.errmsg}/>
                    </Col>
                </FormGroup>
            </Form>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={this.props.onHide}>
                    <i className="fa fa-times" aria-hidden="true"></i>&nbsp;
                    <T.span text="Close" />
                </Button>
            </Modal.Footer>
        </Modal>;
    }
}

Ich habe lange online gesucht, aber den Grund nicht gefunden
Darf ich fragen, was der Grund ist? Wie man damit umgeht?

Answer 1

isMounted已经弃用了、使用componentDidMount