javascript - 组件重新渲染上的Vue.js无限循环

Question

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

1年前关闭。




Improve this question




我正在尝试根据前一个组件中的一些选定属性来构建表:
我正在渲染一个名为“”的组件分支比较 ' 比较 XML 文件及其属性和值。这个组件有两个 props:
selectedEnvs :具有名称和对象的对象数组
普通文件 :具有名称和对象的文件数组
我正在使用 vue-tables-2 来构建这些表。在模板的顶部，它运行一个名为 getProps() 的函数，以从每个文件中生成一组所有可能的属性。我已经硬编码 0 因为目前我只让用户一次选择 1 个文件。然后它遍历每个文件(只有 1 个)并获取主表和比较表的数据。它们实际上是相同的功能(getHeadData 和 getTableData)，但我现在将它们分开以进行进一步定制。该代码对于实际生成表并不那么重要，但是它们内部的某些东西导致我的代码进入无限循环。
在 初始渲染 组件，永远不会有无限循环。一切都贯穿了，根本不会破裂，而且效果很好。然而，一旦组件被渲染，我对 props 进行了更改，或者甚至只是将文件保存在编辑器中并 vue-cli 热重新加载它，它就会进入无限循环。所有数据仍然可以正常生成，并且组件按预期执行。但无论如何它都会循环101次。
我研究过的东西 :
更改数据 :我完全理解码件在数据更改时重新呈现......但是我不相信我正在更改任何方法调用中的任何 react 数据。我只是在函数内本地声明它并将其返回到该临时变量。如果是这样的话，我相信它会在初始组件加载时进入无限循环 ， 但这种情况并非如此。它仅在刷新或 Prop 更改时进入无限循环。
改变 Vuex 状态 : 我调查了这个，但我从来没有改变任何东西的状态。我只是在 getTableData 和 getHeadData 方法中访问它。然后我想，也许分配一个变量来指向这个状态对象会导致它根据访问状态的东西重新渲染，所以我尝试了而不是

this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp
=> {

使用 var x = JSON.parse(JSON.stringify(this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]])然后

x.forEach(envProp =>

但这仍然不起作用。
如果我注释掉调用 getHeadData() 和 getTableData() 的代码，它会循环适当的次数。
这是代码..我对 Vue 还是新手，所以任何更一般的建议我都愿意接受:

 <template>
   <div id="BranchComparison">
      <div :set="info = getProps(0)">
         <div class="file" v-for="(file, fileIdx) in commonFiles" :key="(file, fileIdx)">
            <h3>{{ file }} </h3>
            <b-row :set="mainTable = getHeadData(fileIdx, info.props, info.columns)">
               <b-col class="mainBranch">
                  <h5 class="fileName"> {{ $store.state.branchSelection.split('.').slice(0, -1).join('.') }} <span style="font-size: 14px;">vs </span> </h5>
                  <v-client-table
                     :data="mainTable.data"
                     :columns="mainTable.columns"
                     :options="mainTableOptions"
                     size="small"
                  ></v-client-table>
               </b-col>
               <b-col class="compareBranch" v-for="(branch, branchIdx) in $store.state.branchesToCompare" :key="(branch, branchIdx)">  
                  <h5> {{ branch.name.split('.').slice(0, -1).join('.') }} </h5>
                  <v-client-table
                     :set="temp = getTableData(fileIdx, branchIdx, info.props, info.columns, mainTable)"
                     :data="temp.data"
                     :columns="temp.columns"
                     :options="temp.options"
                     size="small"
                  ></v-client-table>
               </b-col>
            </b-row>
         </div>
      </div>
   </div>
</template>

<script>

export default {

   props: ['selectedEnvs', 'commonFiles'],

   data(){
      return{
         mainTableOptions:{
            filterable: false,
            filterByColumn: false,
            perPage: 200,
            pagination: {
               show: false,
               dropdown: false
            },
            sortable: [''],
            resizableColumns: false,
         },
      }  
   },

   methods: {
      getTableData(fileIdx, branchIdx, props, columns, mainTable){

         var data = []

         var compareTableOptions = {
            filterable: false,
            perPage: 200,
            pagination: {
               show: false,
            },
            sortable: [''],
            hiddenColumns: ['Property'],
            resizableColumns: false,
            cellClasses: {}
         }


         props.forEach(prop => {
            var temp = { Property: prop }
            this.selectedEnvs.forEach(env => {
               var found = false;
               this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
                  if(envProp){
                     if (prop == envProp["@name"]) {
                        compareTableOptions.cellClasses[env.name] = []
                        compareTableOptions.cellClasses[env.name].push({
                           class: 'same',
                           condition: row => {
                              try{
                                 return row[env.name] == mainTable.data[i][env.name]
                              } catch{
                                 console.log('This is a different problem ')
                              }
                           }
                        })
                        found = true;
                        temp[env.name] = envProp["@value"]
                     }
                  }
               });
               if (!found){
                  temp[env.name] = 'Not found'
               } 
            })
            data.push(temp)
         });

         return {
            columns: columns,
            data: data,
            options: compareTableOptions
         }
      },

      getHeadData(fileIdx, props, columns){
         var data = []
         props.forEach(prop => {
            var temp = { Property: prop }
            this.selectedEnvs.forEach(env => {
               var found = false;
               this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
                  if(envProp){
                     if (prop == envProp["@name"]) {
                        found = true;
                        temp[env.name] = envProp["@value"]
                     }
                  }
               });
               if (!found){
                  temp[env.name] = 'Not found'
               } 
            })
            data.push(temp)
         });

         return {
            columns: columns,
            data: data
         }
      },

      getProps(fileIdx){

         if(this.commonFiles.length == 0) return

         var columns = ['Property']
         var props = new Set()

         this.selectedEnvs.forEach((env, idx) => {
            columns.push(env.name)
            this.$store.state.branchesToCompare.forEach(branch => {
               branch.obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
                  if(prop){
                     props.add(prop["@name"])
                  }
               })
            });
            this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
               if(prop){
                  props.add(prop["@name"]);
               }
            });
         });

         var ret = { props: props, columns: columns }

         return ret;
      }
   }
}

</script>

Answer 1

我已经解决了。上面的代码其实没问题。在我发布代码之前不久，我在 v-for 和 getHeadData() 中使用了一个计算属性，我认为发生的事情是它是一个嵌套计算属性，并且在内部循环中它重新计算了它，然后尝试了再次外循环，依此类推。我仍然很困惑为什么它可以在初始渲染上工作，但是哦，好吧。它现在正在工作。