react.js - redux中state更新，但没有重新渲染的问题

问题描述

问 题

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

这篇关于react.js - redux中state更新，但没有重新渲染的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！