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

Question

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

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

我将 props 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 挂钩等时。