时间戳

首页 > 解决方案 > 对使用的 API 数据进行排序时出现问题

vue.js - 对使用的 API 数据进行排序时出现问题

问题描述

我的 Vue.js 组件中有一个简单的 axios API 请求，它位于mounted() 中。实际上，这是该生命周期中唯一的事情。

在 beforeUpdate() 内部，我运行了一个对 API 结果内容进行排序的方法。这也是该生命周期中唯一发生的事情。

整件事奏效了。我运行 npm run serve 并亲眼看到了正确的结果。

所以 - 我继续我的代码并开始研究一种与上述代码无关的方法。保存它，所以服务器刷新了，我去我的浏览器却发现原始代码已经崩溃并且 API 结果消失了。

我删除了对方法的更改——即使它不相关——并再次保存。没有修复。API 结果仍然没有。所以我删除了整个方法 - 但没有补救措施。

Mounted() 搜索和曾经工作的方法仍然没有改变。

我整天都在处理这个问题。有时我会得到正确的结果——实际上并没有理解我做了什么——但是当我改变其他东西时——它们又消失了。

老实说，我认为我的代码没有任何问题，也没有收到任何错误消息。还有什么可能导致这种情况？

编辑：删除 package.json 的显示 - 因为不相关。

<script>
import axios from 'axios';
import moment from 'moment';
moment.locale('nb');  

export default {
  name: 'Regobs',
  data: function() {
    return {
      info: null,
      sortert: [],
      authors: [],
      authorsUnike: [],
      test: null,
    };
  },
  methods: {
    rettTid(dato) {
      var a = moment(dato).format('L');
      var b = moment(dato).format('LT');
      var c = a + " " + b;
      return c
    },

    sortering() {
      this.test = "sortering";
      var i = 0;      
      while(i < 10 ){
      // Hvis istykkelse ikke er registrert, ta den bort
        var istykkelse 
        var iskommentar
        if (this.info[i].IceThickness == null || this.info[i].IceThickness.Comment == null) {
          istykkelse = 0;   
          iskommentar = "";     
        } else {
          istykkelse = this.info[i].IceThickness.IceThicknessSum; 
          iskommentar = this.info[i].IceThickness.Comment;
        }
        // Hvis IceCoverObs ikke finnes
        var iscover
        var iscoverobs
        if (this.info[i].IceCoverObs == null) {
          iscoverobs = "";    
          iscover = "";      
        } else {
          iscover = this.info[i].IceCoverObs.IceCoverName;
          iscoverobs = this.info[i].IceCoverObs.IceCapacityName;
        }
        this.sortert.push( [
          { 'LocationName': this.info[i].ObsLocation.LocationName }, 
          { 'DtObsTime': this.rettTid(this.info[i].DtObsTime) },
          { 'IceThicknessSum': istykkelse },
          { 'IceCoverName': iscover },
          { 'IceCapacityName': iscoverobs }, 
          { 'IceThicknessComment': iskommentar }, 
          { 'Latitude': this.info[i].ObsLocation.Latitude },
          { 'Longitude': this.info[i].ObsLocation.Longitude }, 
          { 'ObsLocationID': this.info[i].ObsLocation.ObsLocationID }
        ] )        
        this.authors.push( this.info[i].Observer.ObserverName )
        i++;     
      }
      return this.sortert
    },
  },
  mounted () {
    axios
      .post('https://api.regobs.no/v4/Search', {'NumberOfRecords': '10', 'SelectedGeoHazards': '[70]', 'Extent': { 'TopLeft': { 'Latitude': '60.14', 'Longitude': '10.21' }, 'BottomRight': { 'Latitude': '60.04', 'Longitude': '10.35' }}},  { headers: {'Content-Type': 'text/json'}})
      .then(response => (this.info = response.data ));
  },
  beforeUpdate () {
    this.sortering();
  },
  filters: {
    rundAv: function(value) {
      if(!value) {
        value = 0;
      }
      value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
      return value;
    },
    meterTilCm: function(value) {
      var a = value * 100;
      var b = a + " cm";
      return b;
    }
  },
}
</script>

编辑：所以我根据@T.Short 的答案更改了代码 - 并删除了整个 beforeUpdate。这在 localhost 上工作得很好，但是当部署在 netlify 上时组件崩溃了。控制台也开始显示错误：

[Vuew warn] You may have an infinite update loop in a component render function.

我还尝试稍微改进 mount() 代码：

  mounted () {
    this.pending = true;
    axios
      .post('https://api.regobs.no/v4/Search', {'NumberOfRecords': '10', 'SelectedGeoHazards': '[70]', 'Extent': { 'TopLeft': { 'Latitude': '60.14', 'Longitude': '10.21' }, 'BottomRight': { 'Latitude': '60.04', 'Longitude': '10.35' }}},  { headers: {'Content-Type': 'text/json'}})
      .then(response => { this.info = response.data })
      .catch(error => {this.error = error })
      .finally( function() { 
        this.sortering()
        this.pending = false });
  }

但仍然没有喜悦。实际上，Vue DevTools 表明pending 一直都是真的——这也有点奇怪（对我来说）。API被消耗，但我的方法（）（排序）没有发生......

标签： vue.jsaxios

解决方案

根据您的评论，在我看来您应该这样做：

mounted () {
    axios
      .post('https://api.regobs.no/v4/Search', {'NumberOfRecords': '10', 'SelectedGeoHazards': '[70]', 'Extent': { 'TopLeft': { 'Latitude': '60.14', 'Longitude': '10.21' }, 'BottomRight': { 'Latitude': '60.04', 'Longitude': '10.35' }}},  { headers: {'Content-Type': 'text/json'}})
      .then(response => {
           this.info = response.data;
           this.sortering();
      } );
  }

您想等待响应到达，设置this.info然后调用该函数。

编辑

所以，我设法让它工作。你有两个罪魁祸首：

  1. {{ forfattere(authors) }}- 重构这个，它会导致无限循环

  2. 这行代码：

<span :class="[ tykkelsen ? 'green' : 'red']">{{ sjekkTykkelsen(item[2].IceThicknessSum) }} cm</span>

这也导致了无限循环。

这是一个有效的 Sandox：https ://codesandbox.io/s/funny-lumiere-v00c2

推荐阅读