关于异步数据的问题，push后不显示数据

Question

使用的uni-app vue页面

父组件

<view>
    <view @click="click(mapData.marker)"></view>
</view>

data() {
 return {
     mapData: {}
    }
},
onLoad() {
    this.getData()
},
methods: {
getData() {
    // 获取数据
    async getData() {
        this.mapData = await getmapData().then(res=> {
            //getmapData调用了异步封装的uni.request
            return res.data.data
        })
    },
},
click(data) {
          uni.navigateTo({
          url:'./stores/index?marker=' + encodeURIComponent(JSON.stringify(data))
        })
    }
}

子组件

 <template>
     <showOne :data="data"></showOne>
 </template>

data() {
    return {
        data: []
    }
},
onLoad(data) {
    console.log(JSON.parse(data), "打印有数据")
    this.data = JSON.parse(data)
},

子组件的子组件

props: ['data'],
data() {
    return {
        covers: [],
    };
},
mounted() {
    this.dataDis()
},
methods:{
    dataDis() {
        this.data.map((item, index) => {
            this.covers.push({
                id: item.id,
                title: item.title,
                latitude: item.latitude,
                longitude: item.longitude
            })
        }) 
        console.log(this.covers, "打印无数据，见下图");
    }
}

求解答...为什么最后打印会没有数据，length为0

Answer 1

试试在孙组件监听 data 变化：

watch: {
    data(){
        this.dataDis();
    }
}

还有就是无需返回值的迭代尽量使用 forEach 而非 map，前者性能较优，虽然差距通常不大，不过要藏拙。

Answer 2

可以从由5条数据变为0条数据找原因。打印的时候应该确实是有5条数据的，展开后获取的是最新的内容，可以在打印的时候做一个副本，看看数据是不是正确的