javascript - 无法正确从 html 调用 vue 函数(组件渲染函数中的无限更新循环)

Question

当我尝试按升序或降序对数组进行排序时，控制台出现错误。

我正在使用Vue制作一个有序的表格，并且我可以用已有的数据制作一个表格。但是，当我调用函数时，我在页面中显示正确的结果，但在控制台中出现错误。当我尝试编写一些代码来返回所有数组的 %10 时，例如 var i = array.lenght * 0-1" 它不起作用。

<tbody id="app" v-bind:placeholder="OrdenarMiembrosDesc(members)" required>
    <tr v-for="member in members">
    <td>{{ member.first_name }} {{member.last_name}}</td>
    <td>{{ member.total_votes }}</td>
    <td>{{ member.votes_with_party_pct }} </td>
    </tr>
</tbody>

<script>

let app = new Vue({
    el: '#app',
    data: {
        members: [] //this already have a lot of users info, and it works
    },
    methods: {
        OrdenarMiembrosAsc(miembros) {
            return miembros.sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
        },

        OrdenarMiembrosDesc: function(miembros) {
            var temp = miembros.sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
            var i = temp.lenght;
            console.log(temp);
            console.log(i);
            return temp;
        },
    }
});

</script>

除了我的变量日志之外，我预计不会有任何消息，但我有很多控制台日志，然后“[Vue warn]:组件渲染函数中可能存在无限更新循环。

(在 中找到)”

Answer 1

渲染期间调用的任何方法(即模板中的方法调用)不应改变 react 状态，因为这将触发潜在的无限重新渲染，因此会出现警告。

members 处于 react 状态，并且您正在调用 members.sort() ，这会改变数组而不是返回新数组。

简单的修复方法是首先对其进行 .slice() 。这将执行数组的浅克隆。

var temp = miembros
  .slice()
  .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);

更好的方法是将它们定义为计算属性而不是方法，因为它们没有理由成为方法，并且您可以通过缓存结果来提高性能。

computed: {
  OrdenarMiembrosAsc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
  },

  OrdenarMiembrosDesc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
  }
}