react 通过setState（）管理两个子组件的展示状态，报错。

Question

切换组件报错
情景描述：一个父组件F，和两个子组件A，B，父组件中按钮btn
父组件的this.state中保存了两个与子组件展示相关的状态，isShowA:false ,isShowB:false,默认值均为false。
父组件会向A中传一个改变state中状态的函数fn=()=>{ this.setState({isShowA:false,isShowB:true}) }
点击btn 会执行this.setState({isShowA:true})相继展示子组件A，
在A中执行fn就会报错。

Answer 1

没有具体代码，给你一种假设，在组件A中调用this.props.fn时，父组件就进入了重新渲染状态，而这时，又有一个组件调用了this.props.fn，所导致的警告。

Answer 2

你的调用方式应该就是 parent 中点击按钮显示A,A中调用this.props.fn，这时候看你this.props.fn放在那里了，因为父类点击显示按钮A,这时候才加载这个组件，这个组件还没渲染出来，你就去改变他的state了，你把this.props.fn放到componentDidMount中调用就不会报错了

其实最好是这样写

parent中

this.setState({
isShowA:true
},() => {

this.setState({
    isShowA: false;
})

})

，

Answer 3

这是警告吧……组件在卸载以后改变他的状态就会出现这个东东，稍微搜一下就有的吧。

解决办法就是在组件卸载的回调上重置setState。

componentWillUnmount()上重置手机打字有点不方便，能懂就行。