Javascript 警告:无法在现有状态转换期间更新
我有一个复杂的应用程序,它给我以下警告: 警告:设置状态(…):无法在现有状态转换期间更新(例如在Javascript 警告:无法在现有状态转换期间更新,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我有一个复杂的应用程序,它给我以下警告: 警告:设置状态(…):无法在现有状态转换期间更新(例如在渲染或其他组件的构造函数中)。渲染方法应该是道具和状态的纯函数;构造函数的副作用是一种反模式,但可以移动到componentWillMount 简而言之,当我按下“添加”按钮时,会出现此警告,该按钮会将另一个组件添加到我的应用程序中。下面是一段相应的代码: <Button onClick={addChartHandler.bind(this)}><Glyphicon glyph="
渲染
或其他组件的构造函数中)。渲染方法应该是道具和状态的纯函数;构造函数的副作用是一种反模式,但可以移动到componentWillMount
简而言之,当我按下“添加”按钮时,会出现此警告,该按钮会将另一个组件添加到我的应用程序中。下面是一段相应的代码:
<Button onClick={addChartHandler.bind(this)}><Glyphicon glyph="plus" /></Button>
addChart只是增加组件计数器。应用程序容器订阅这些更改:
const mapStateToProps = (store) => {
return {
count: store.app.chartsCount
};
}
我很难追踪警告,但每次组件呈现时,我都会调用console.log
。呈现此组件(这是my应用程序的哑组件)后,此警告似乎会弹出:
render(){
让图表=[];
for(设i=0;i
欢迎提出任何建议。我已经为此工作了至少三个小时,没有任何想法。这是一行代码,因为代码导致了我感觉的问题:-
for (let i = 0; i < this.props.count; i++) {
charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
}
这是一行代码,因为代码导致了我感觉的问题:-
for (let i = 0; i < this.props.count; i++) {
charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
}
感谢所有的回答,我解决了这个问题:我在调用其他组件的constructor()
中的setState
。对于那些正在查看的组件:仔细检查所有其他组件,以及它们的render()
和constructor()
方法。感谢所有的答案,我解决了这个问题:我在调用其他组件的constructor()
中的setState
。对于那些正在查看的组件:仔细检查所有其他组件,以及它们的render()
和constructor()
方法。此解决方案帮助我理清思路
我面临这个错误,因为我添加了this.setState({})代码>在构造函数中它自己
所以我把它移到了组件willreceiveprops
,它成功了
谢谢@Harkirat Saluja这个解决方案帮助我理清思路
我面临这个错误,因为我添加了this.setState({})代码>在构造函数中它自己
所以我把它移到了组件willreceiveprops
,它成功了
谢谢@Harkirat SalujaChartContainer在做什么?@Christian获得绘制图表所需的数据(使用chart.js)ChartContainer在做什么?@Christian获得绘制图表所需的数据(使用chart.js)
for (let i = 0; i < this.props.count; i++) {
charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
}
constructor(){
state : {
charts : []
}
}
componentWillReceiveProps(nextProps){
if(nextProps.count != this.props.count){
let charts = []
for (let i = 0; i < this.props.count; i++) {
charts.push(<ChartContainer id={i} key={i} size={this.props.size} />);
}
this.setState({charts:charts})
}
}
render() {
return (
<div className="container-padding">
<NavContainer />
{this.state.charts}
</div>
);
}