react.js - 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查看home的props的时候，发现props不会变，但是我log(state)的时候确实是变了，找了一天了，不知道问题出在哪里。
整个流程我从头log到尾，都是正常的。

解决方案

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

这篇关于react.js - redux数据改变，组件运行中的生命周期不执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！