在我的 ReactJS@15 项目中,unmount setState change warning 出现问题,但组件已经挂载。
这是应用程序结构:
/app
/container
/veil
/router
/routed-view
/other-routed-view
我还有一个“veil manager class”,它以这种方式触发附加到 veil 组件的“_toggle”事件:
componentDidMount()
{
VeilManager.i().on('toggle', this._toggle.bind(this));
}
_toggle(payload = {})
{
const { veil = false, cb } = payload;
this.setState({ isOpen: veil }, cb);
}
然后从路由 View 触发以下代码:
componentDidMount()
{
VeilManager.i().toggle(this._otherFunc.bind(this));
}
在调试流程中,当事件被触发时,Veil 组件被标记为未安装,但根本没有任何意义,因为容器已经注册到其子组件。
此外,Veil 组件会按预期使用react,因此当 VeilManager 状态更改时,Veil 会切换进出。
有什么建议吗?
扩展代码:
// Veil.js
import { background, logo, veil } from './Styles';
import React, { Component } from 'react';
import VeilManager from './Manager';
export default class Veil extends Component
{
constructor(props)
{
super(props);
this.state = {
isOpen: false
};
}
componentDidMount()
{
VeilManager.i().on('toggle', this._toggle.bind(this));
}
_toggle(payload = {})
{
const { veil = false, cb } = payload;
this.setState({ isOpen: veil }, cb);
}
/**
* @override
*/
render()
{
const { isOpen = false } = this.state;
return (
<div style={veil(isOpen)} className="veil-wrapper">
<div style={logo} className="veil-wrapper__logo"/>
<div style={background}/>
</div>
);
}
}
// VeilManager.js
const { EventEmitter } = require('events');
/**
* VeilManager singleton reference
* @type {null}
*/
let $iManager = null;
/**
* Handles the status of veil
* @class veil.Manager
* @extends EventEmitter
*/
export default class Manager extends EventEmitter
{
/**
* @constructor
*/
constructor()
{
super();
this.isOpen = false;
}
/**
* Toggles "isOpen" status
* @param {null|Function} cb To execute after toggling
*/
toggle(cb = null)
{
this.isOpen = !this.isOpen;
this.emit('toggle', { veil: this.isOpen, cb });
}
/**
* Returns the singleton instance of VeilManager
* @return {null|Manager} Singleton instance
*/
static i()
{
$iManager = $iManager || new Manager();
return $iManager;
}
}
//Container.js
import 'react-s-alert/dist/s-alert-css-effects/slide.css';
import 'react-s-alert/dist/s-alert-default.css';
import { Redirect, Route, Switch } from 'react-router-dom';
import React, { Component } from 'react';
import Alert from 'react-s-alert';
import Aside from '@/components/Aside';
import Header from '@/components/Header';
import token from '@/orm/Token';
import Sidebar from '@/components/Sidebar';
import Veil from '@/components/Veil';
// VIEWS
import Clients from '../../views/Clients/';
import Dashboard from '@/views/Dashboard';
export default class Full extends Component
{
/**
* @override
*/
render()
{
return (
<div className="app">
<Header />
<div className="app-body">
<Sidebar {...this.props}/>
<main className="main">
<Veil/>
<div className="container-fluid">
{ token.hasExpired()
? <Redirect to="/login"/>
: <Switch>
<Route path="/dashboard" name="Dashboard" component={Dashboard}/>
<Route path="/clients" name="Clients" component={Clients}/>
<Redirect to="/dashboard"/>
</Switch>
}
</div>
</main>
<Aside />
</div>
<Alert stack={{ limit : 3 }} />
</div>
);
}
}
//Clients.js
import React, { Component } from 'react';
import onFetch from '@/mixins/on-fetch';
/**
* Clients view.
*/
export default class ClientsIndex extends Component
{
/**
* @constructor
*/
constructor(props)
{
super(props);
this._onFetch = onFetch;
}
/**
* @override
*/
componentDidMount()
{
this._onFetch();
}
/**
* @override
*/
render()
{
return (
<div className="animated fadeIn">
<div className="row">
...
</div>
</div>
);
}
}
//mixin/on-fetch
import VeilManager from '@/components/Veil/Manager';
export default (cb = null) => {
debugger;
VeilManager.i().toggle(cb);
};
最佳答案
解决方案:
正如评论中指出的那样,存在冒泡事件和状态传播的问题。
所做的更改:
// Veil manager
...
toggle(cb = null)
{
this.isOpen = !this.isOpen;
const detail = { veil: this.isOpen, cb };
window.dispatchEvent(new CustomEvent('veil-toggle', { bubbles: false, detail }));
}
...
// Veil
...
/**
* @override
*/
constructor(props)
{
super(props);
this.state = {
open: false
};
}
/* istanbul ignore next */
componentWillReceiveProps(next)
{
const open = next && !!next.open;
this.setState({ open });
}
/**
* @override
*/
render()
{
return (
<div style={veil(this.state.open)} className="veil-wrapper">
<div style={logo} className="veil-wrapper__logo"/>
<div style={background}/>
</div>
);
}
...
// Container
...
componentDidMount()
{
window.addEventListener('veil-toggle', this._toggleVeil.bind(this));
}
_toggleVeil(e)
{
this.setState({ veil: e.detail.veil }, e.detail.cb);
}
render()
{
...
<Veil open={this.state.veil}/>
...
}
...
关于javascript - 卸载 setState 警告,即使组件已安装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57786738/