实现功能:
页面首次加载,发送请求获取三条数据,每条数据里面又分为3个小数据。通过 mapState 映射到相应的组件上,在组件中渲染呈现上图的页面。点击查看全部,可重新发送请求,获取一条数据,替换掉 state 中的相对应的那条数据,呈现到页面。
场景呈现:
按功能来,点击 查看全部 弹出如下选项框,点击选项后,立刻取消弹出框,页面渲染的那条数据立刻更新。
但是这边出现了bug,需要再次点击 查看全部,才能重新渲染页面(注意,vuex中打印的数据是新的)
bug出现原因:
async hotRecommendData({commit,state}, idd) { let result = await api.api.hotRecommend(idd) let data = { data: result.data, _id: idd.ss, lee: result.lei // id: idd.ss? aa : '' } //state.hotRecommend = [...state.hotRecommend,...result.data] commit('HOTRECOMMENDDATA', data) } HOTRECOMMENDDATA(state, value) { let arr = [...value.data] if (value._id) { state.hotRecommend[value._id - 1] = arr[0] // console.log('数据2:',state.hotRecommend); } else{ state.hotRecommend = [...state.hotRecommend,arr[0]] } }
首次加载页面,执行这串代码
state.hotRecommend = [...state.hotRecommend,arr[0]]
点击 查看全部 ,更换对应那条数据时,执行下面代码。
if (value._id) {
state.hotRecommend[value._id - 1] = arr[0]console.log('数据1:', state.hotRecommend)
}
此时 state 中的数据是这样,可能因为,是直接替换的原因,导致 替换的数据 没有 __ob__:Observer,可能就是这个原因出现的 bug,导致页面需要点击两次才渲染
解决方案:
- 在if 判断中加上 state.hotRecommend = [...state.hotRecommend,arr[0]] 。这时的console.log 打印就都存在 __ob__:Observer
if (value._id) { state.hotRecommend[value._id - 1] = arr[0] state.hotRecommend = [...state.hotRecommend,arr[0]] console.log('数据1:',state.hotRecommend); } else{ state.hotRecommend = [...state.hotRecommend,arr[0]] }
- 直接把 state.hotRecommend = [...state.hotRecommend,arr[0]] 提出来放在外面,这时的console.log 打印就都存在 __ob__:Observer
state.hotRecommend = [...state.hotRecommend,arr[0]] if (value._id) { state.hotRecommend[value._id - 1] = arr[0] console.log('数据1:',state.hotRecommend); }
- 也可以把 state.hotRecommend = [...state.hotRecommend,arr[0]] 放到 action 函数里面
标签:...,arr,渲染,hotRecommend,value,state,id,页面 From: https://www.cnblogs.com/sssong123/p/16734781.html