在我的组件中,我编写了一个条件检查函数来禁用/启用按钮。有多个嵌套的条件检查。在运行时,我在声纳中得到“降低认知复杂性”错误,这是至关重要的。
这是我的函数
const isButtonSubmit = computed(() => {
let disableButton = false;
if (formInput.value.radio3 === 'yes') {
if (formInput.value.input1 === '') {
disableButton = true;
}
}
if (formInput.value.radio4 === 'yes') {
if (formInput.value.input2 === '') {
disableButton = true;
}
}
if (formInput.value.radio4 === 'no') {
if (formInput.value.input6 === '') {
disableButton = true;
}
}
if (formInput.value.radio5 === 'no') {
if (formInput.value.input3 === '') {
disableButton = true;
}
}
if (formInput.value.radio6 === 'yes') {
if (formInput.value.input4 === '') {
disableButton = true;
}
}
if (formInput.value.radio6 === 'no') {
if (formInput.value.input5 === '') {
disableButton = true;
}
}
if (formInput.value.radio7 === 'no') {
if (formInput.value.input7 === '') {
disableButton = true;
}
}
if (formInput.value.radio8 === 'no') {
if (formInput.value.input8 === '') {
disableButton = true;
}
}
if (formInput.value.radio9 === 'no') {
if (formInput.value.input9 === '') {
disableButton = true;
}
}
return disableButton;
});
由于这些条件检查,我得到了与认知复杂性相关的警告。请让我知道如何解决这个问题?
2条答案
按热度按时间lb3vh1jj1#
解决这类问题的方法总是一样的,你必须从结构中提取数据,然后找到一种有效应用它的方法。您最终应该得到更易于维护和更紧凑的代码。
在您的情况下,这可能是这样的:
hts6caw32#
OP可以利用对象文字作为配置,其Map将计算的按钮值定义为 disabled 的所有相关数据。接下来提供的示例代码通过迭代所有涉及的元素键的数组来这样做,其中对于每个键,检索其相关形式的输入值,并从后者检索用于比较值的有效配置。所提供的数据结构从元素-值方面来说是尽可能通用的,因此仍然对单独针对元素值的更改开放……