state中有一项backgroundColor, 本意是当backgroundColor变化时,下面组件的css能够变化。
在redux devtoos中可以看到state已经更新了,但没有重新渲染。shouldComponentUpdate也没有触发。
等到下一个TOGGLE_TOPNAV的时候 重新渲染会把这次的变化加上。
求大神解答 怎么样才能强制渲染呢?小弟感激不尽!!!
组件的主要部分如下:
render() {
let {
backgroundColor,
} = this.props;
return (
<div className="container" id="reader-container" style={{backgroundColor:backgroundColor}}>
</div>
);
}
reducer中这样写的:
case 'TOGGLENIGHT':
state.night = !state.night;
if (state.night) {
state.backgroundColor = '#181b22';
}
return Object.assign({}, state);
看不到你处理TOGGLE_TOPNAV的reducer是怎么写的,我猜测应该是因为你直接对state进行了修改,state是引用,store内部的state同样也就变了,这样导致React-Redux认为dispatch前后state没有改变,就不会重新渲染UI,实际state已经改变。
当处理TOGGLE_TOPNAV的时候触发了state变动,所有的数据被渲染,所以UI就变化了。
解决办法不要直接修改state 不要直接修改state 不要直接修改state