尝试根据值设置不同的数组。错误：组件渲染函数中可能存在无限更新循环

Posted 2023-02-22

【中文标题】尝试根据值设置不同的数组。错误：组件渲染函数中可能存在无限更新循环

【英文标题】：Trying to set different arrays depending on value. Error: You may have an infinite update loop in a component render function

【发布时间】：2020-02-17 19:09:55

【问题描述】：

我正在尝试根据另一个值将此数组设置为不同的东西并得到错误

[Vue 警告]：组件渲染函数中可能存在无限更新循环。

我在 vue 的 data() 中将数组设置为空，

ranktexts: [],

然后在我使用此代码的方法中

texts(rank) 
    if (rank === 3) 
        this.ranktexts = ['Mal', 'Indiferente', 'Bueno'];
     else if (rank === 4) 
        this.ranktexts = ['Mal', 'Indiferente', 'Bueno', 'Excelente'];
     else if (rank === 5) 
        this.ranktexts = ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Excelente'];
     else 
        this.ranktexts = ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Muy Bueno', 'Excelente'];
    
,

这就是我所说的

<div class="question_reply" v-if="form.response_type_id === 3">
    <el-form-item>
        <el-rate v-model="value"
            :max="form.rank"
            :texts="texts(form.rank)"
            show-text
            allow-half
        ></el-rate>
    </el-form-item>

【参考方案1】：

是的！您的组件将被无限重新渲染。

渲染时，:texts="texts(form.rank)" 得到结果你用参数调用了一个方法。

在该方法中，您更新了数据中的ranktexts。更新ranktexts 将使组件重新渲染。

所以再次渲染。

render -> texts(form.rank) -> 更新 ranktexts -> 渲染

解决这个问题。我认为没有必要使用ranktexts。

只返回数组。

texts(rank) 
    if (rank === 3) 
       return ['Mal', 'Indiferente', 'Bueno'];
    
    if (rank === 4) 
       return ['Mal', 'Indiferente', 'Bueno', 'Excelente'];
    
    if (rank === 5) 
       return ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Excelente'];
    
    return ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Muy Bueno', 'Excelente'];

【讨论】：

@Nancy 你发送了像show-text="true" 这样的道具吗？如果然后只需添加: 就像:show-text="true"。如果没有，请在您的问题中提供更多代码，以便我为您提供帮助。

嗨，我想通了，作为回报，我在做return 'true' 而不是return true，谢谢