javascript - 使用react报错

问题描述

报错：Modal: isMounted is deprecated. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.

class NewGateway extends React.Component { constructor(props) {super(props);this.state = {errmsg: ’’, selectedValue: ’2’};// This binding is necessary to make `this` work in the callbackthis.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>; }}

网上找了好久也没找到原因问一下怎么是什么原因？怎么解决？

问题解答

isMounted已经弃用了、使用componentDidMount