渲染时如何计算数组 [Vue.js] - 无限循环错误

Question

这是我在父组件中的代码：

                   <div
                            v-for="measurement
                             in measurements"
                            :key="measurement.id"
                   >
                            <graph-component
                                :value="valueOfMeasurement(measurement)"
                            ></graph-component>
                  </div>

我将道具 value 发送到子组件 graph-component。 :value 应该将数组发送到 graph-component 但我收到错误 You may have an infinite update loop in a component render function..

方法valueOfMeasurement(measurement)是：

methods:{

     valueOfMeasurement(measurement) {
                this.arrayOfValues.length=0;
                this.counter=0;
    
                for( this.counter;this.counter<this.message.feeds.length;this.counter++)
                {
                     this.arrayOfValues.push(this.message.feeds[this.counter]["field" + measurement.fieldId]);
                }
                return this.arrayOfValues;
                
            }
}

我是 Vue.js 的初学者，我认为我收到此错误是因为我将新元素推送到数组，但我找不到其他方法来执行此操作。

Answer 1

您可能会遇到无限循环，因为您在渲染过程中改变了状态。具体来说，您在渲染期间（即在模板内）调用 valueOfMeasurement 方法，它正在修改组件状态（this.arrayOfValues 和 this.counter）。这将触发 Vue 再次重新渲染，然后再次改变状态，依此类推。

为什么 arrayOfValues 和 counter 是本地状态？无论如何，每次调用该方法时，您只是清除它们，因此它们似乎应该只是方法中的局部变量。但是...这取决于 <graph-component> 是否改变了这些数组；如果是这样，您应该在模板之外提前预先计算所有这些数据，也许是在首次设置 measurements 时或在 created 挂钩中等

渲染时如何计算数组 [Vue.js] - 无限循环错误

How to calculate array while rendering [Vue.js] - Infinite loop error

javascript

vue.js

vue-props