大概的问题就如同标题
上描述的,我简单用代码还原下场景吧。第一次遇到这种问题,估计大多数人都没有遇到过。
// 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));来改变变量的内存地址指向,组建就更新了。可以做个参考。