Vue 구성 요소의 "구성 요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다" 경고

Vue 구성 요소의 "구성 요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다" 경고

정렬 기능이 있는 기본 테이블을 만들고 있습니다.

<template>
  <!-- more code -->
  <tr v-for="item in sortBy(data.body, { name: 'name', order: 1 })">
    <td v-for="field in item">{{ field }}</td>
  </tr>
  <!-- data.body => [{ name: Group 1 }, { name: Group2 }, // etc.] -->
</template>

props: {
  data: {
    type: Object,
    default () {
      return {}
    }
  }
},

methods: {
  sortBy (data, params) { 
    // the warning disappears if I only leave "return data"
    data.sort((a, b) => {
      return a[params.name] - b[params.name] * params.order
    })
    return data
  }
}

무슨 이유에서인지 경고음이 들립니다.

[Vue warn] :구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.

이것은 왜 그리고 어떻게 수정해야 하는가?

데이터 값을 변경하고 있기 때문에 경고가 표시됩니다.본체 종류 내.이 데이터를 변경하면 렌더링 기능이 다시 실행됩니다.무한 루프가 발생하지 않는 이유는 두 번째 sortBy 호출 시 데이터가 이미 정렬되어 있기 때문에 data.body에 대한 데이터 변경은 발생하지 않기 때문입니다.

해결책은 Jaromanda X가 말한 것입니다.슬라이스를 사용하면 데이터를 의미하는 배열의 복사본이 생성됩니다.body 값은 변경되지 않으므로 재호출이 호출되지 않습니다.

return data.slice().sort(....

언급URL : https://stackoverflow.com/questions/47384480/you-may-have-an-infinite-update-loop-in-a-component-render-function-warning-in