Vue中使用jsx,报错无限循环渲染an infinite update loop

使用了element-ui,报了You may have an infinite update loop in a component render function.这么一个错误,不知道哪里无限循环渲染了,有人帮忙解答吗?代码如下

_this.$msgbox({
    title: '修改密码',
    message: (
        <el-form 
            model={ _this.passwordChangeFormData }
            rules={ _this.passwordChangeFormRules }
            ref="passwordChangeForm"
        >
            <el-form-item prop="oldPassword">
                <el-input
                    type="password"
                    value={ _this.passwordChangeFormData.oldPassword }
                    onInput={ _this.oldPasswordChange }
                    placeholder="旧密码"
                ></el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
                <el-input
                    type="password"
                    value={ _this.passwordChangeFormData.newPassword }
                    onInput={ _this.newPasswordChange }
                    placeholder="新密码"
                ></el-input>
            </el-form-item>
        </el-form>
    )
});

----更新----
不使用jsx而改用render函数则不会报错,觉得可能是自己jsx使用姿势不对(?),有人可以帮忙解答一下为什么吗?render代码如下

h('el-form', {
    props: {
        model: _this.passwordChangeFormData,
        rules: _this.passwordChangeFormRules
    },
    ref: 'passwordChangeForm'
}, [
    h('el-form-item', {
        props: {
            prop: 'oldPassword'
        }
    }, [
        h('el-input', {
            props: {
                type: 'password',
                value: _this.passwordChangeFormData.oldPassword,
                placeholder: '旧密码'
            },
            on: {
                input: _this.oldPasswordChange
            }
        })
    ]),
    h('el-form-item', {
        props: {
            prop: 'newPassword'
        }
    }, [
        h('el-input', {
            props: {
                type: 'password',
                value: _this.passwordChangeFormData.newPassword,
                placeholder: '新密码'
            },
            on: {
                input: _this.newPasswordChange
            }
        })
    ])
])
阅读 8.2k
2 个回答

慎用内联表达式,对于自定义vue属性而言,它会被渲染器自执行,
尽可能用事件改变状态 ,驱动页面渲染重绘

解决了吗。。。我也遇到了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题