需求：当接口数据更新并获取到数据后，存入数组，如何将数据存在数组中而不会随着下一次接口数据更新而不存在？

  • Z时代
  • 2024-02-27
  • 分类：IT

如下代码，现在的方法只能渲染出当前接口返回的数据，之前的数据保存不到数组中。后来将获取数据的方法用定时器去调用，仍然无效。

 <tableReuse2 class="item" :datalist="arrdata[0].data" :titlelist="arrdata[0].title"></tableReuse2>
        <tableReuse2 class="item" :datalist="arrdata[1].data" :titlelist="arrdata[1].title"></tableReuse2>
        <tableReuse2 class="item" :datalist="arrdata[3].data" :titlelist="arrdata[3].title"></tableReuse2>
 data () {
    return {
      arrdata: [{}, {}, {}], // 包含了所有的工站数据,
      alldata: {}, // 某一个工站数据
      intervalID: '',
      // 父子通信不可以直接绑定，一旦某个工站获得该数据，其余绑定该数据源的组件同样也获得数据
      titlelist: {}, // 某一个工站数据的title
      datalist: [] // 某一个工站数据的data
    }
async getAllData () {
      console.log('空的数组：', this.arrdata)
      const data = await this.$http.get('https://mock.apifox.cn/m1/2452239-0-default/api/alldata')
        .then((response) => {
          console.log('我是后端响应的数据！！', response)
          return response.data
        })
        .catch((error) => {
          console.log(error)
        })
      console.log('我是获取到的数组数据！！', data)
      this.id = data.id
      this.alldata = data
      console.log('我是一个json文件的所有数据', data)
      console.log('数组索引：', parseInt(this.id) - 1)
      this.arrdata.splice(parseInt(this.id) - 1, 1, this.alldata)
      console.log('已经放到数组中的数据', this.arrdata)
    },

回答：

this.arrdata.splice(parseInt(this.id) - 1, 1, this.alldata)

没看懂你想做什么，用新的数据替换原来的某个数据？

根据你题干的描述，好像是需要按照id保存每次请求的数据，那么示例如下：

const map = {};
const array = map[data.id] ?? [];
array.push(data);
map[data.id] = array;

现在 map 中就是按照id保存的数据列表

{
  "1": [{title: "", data: {}}, {title: "", data: {}}, {title: "", data: {}}],
  "2": [{title: "", data: {}}, {title: "", data: {}}, {title: "", data: {}}],
  "3": [{title: "", data: {}}, {title: "", data: {}}, {title: "", data: {}}]
}

回答：

this.arrdata[parseInt(this.id) - 1] = {
  ...this.arrdata[parseInt(this.id) - 1],
  ...this.alldata
}

或者：

this.arrdata.push(this.alldata);

以上是 需求：当接口数据更新并获取到数据后，存入数组，如何将数据存在数组中而不会随着下一次接口数据更新而不存在？ 的全部内容， 来源链接： utcz.com/p/934838.html

回到顶部