redux数据改变,组件运行中的生命周期不执行

大概的问题就如同标题上描述的,我简单用代码还原下场景吧。第一次遇到这种问题,估计大多数人都没有遇到过。

// action
function getHomeData(data) {
    return {
        type: 'HOME_REAL_TIME_CHARTS_RETURN',
        homeCharts: data
    }
}
export const getHomeRealTimeData = () => {
    return dispatch => {
        //socket 获取第一次数据
        socket.emit('indexAllCoins', {type: 1})
        socket.on('indexAllCoins', function (data) {
            dispatch(getHomeData(data))
        })
    }
}

上面是home组件调用的action


// reducer
case 'HOME_REAL_TIME_CHARTS_RETURN':
    return {
        ...real,
        homeCharts: increaseHomeData(action.homeCharts)
    }


function increaseHomeData (data) {
    if(data.type === 1) {
        homeDate = data.attachment
    } else {
        let coinCode = data.attachment.coinCode
        homeDate.forEach((item, index) => {
            if(item.coinCode === coinCode) {
                homeDate[index] = data.attachment
            }
        })
    }
    return homeDate
}

上面是对应的reducer,关于increaseHomeData方法接收的数据大概是这样的:

// 第一次返回
let fst = {
    type: 1,
    attachment: [{ coinCode: '1' }, ...]
}

// 以后推送的单条数据
let sec = {
    type: 2,
    attachment: {
        coinCode: '2'
    }
}

// home component
class Home extends Component {
    render () {
        const { homeCharts } = this.props
        return (
            <div>
                {/* ... */}
            </div>
        )
    }
}

export default connect(state => {
    console.log(state) // 这里打印的state可以明确的看到store上对于的数据已经更新
    return {
        ...state.homePage,
        random: Math.random()
    }
})()

上面是使用数据的home组件,一开始没有写random的时候,log(state)里面的数据已经改变了,但是运行中的组件却不会执行,加上random之后服务端推送的数据就能正常更新了。
使用react-dev-tool查看homeprops的时候,发现props不会变,但是我log(state)的时候确实是变了,找了一天了,不知道问题出在哪里。
整个流程我从头log到尾,都是正常的。

阅读 3.8k
2 个回答

我之前也遇到state变化了,但是组建没有更新的问题。原因是直接引用是浅赋值,我改变数组中的数据,由于浅复制的原因,redux认为数据并没有变化,所有组建没有更新,最后我将改变的变量通过data = JSON.parse(JSON.stringify(data));来改变变量的内存地址指向,组建就更新了。可以做个参考。

home组件里connect({options})(Home),忘记把Home传进去了吧。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题