首页 > 其他分享 >改变state里面的数据,页面没有及时渲染,需要重复触发才能渲染

改变state里面的数据,页面没有及时渲染,需要重复触发才能渲染

时间:2022-09-27 15:47:33浏览次数:58  
标签:... arr 渲染 hotRecommend value state id 页面

实现功能:

页面首次加载,发送请求获取三条数据,每条数据里面又分为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

相关文章