满足条件时表单按钮未切换显示问题求助

你的核心问题是条件判断逻辑错误：

• Object.values(formData).filter(value => value !== null) 返回的是一个数组，把数组和true做==比较永远会得到false——因为数组是引用类型，和布尔值类型不匹配，导致按钮状态始终无法切换。

正确的判断方式 #

推荐用Array.every()方法直接检查所有字段是否不为null，逻辑更清晰高效：

{ Object.values(formData).every(value => value !== null) ? (
    <Button
        Size='w-full'
        Caption='Submit & Continue'
        AdditionalClasses='block text-center'
        Type={'primary'}
    />
) : (
    <Button
        Size='w-full'
        Caption='Please fill in the above form to continue'
        AdditionalClasses='block justify-center'
        Disabled={0}
        OnClick={test}
        Type={'disabled'}
    />
)}

补充说明 #

如果坚持用filter的方式，需要判断过滤后的数组长度是否等于原对象的属性数量，代码如下：

{ Object.values(formData).filter(value => value !== null).length === Object.keys(formData).length ? (
    // 启用状态按钮
) : (
    // 禁用状态按钮
)}

但every()更适合这种"所有元素都满足条件"的场景，性能也更好——一旦遇到不满足的元素会立即停止遍历。

内容的提问来源于stack exchange，提问作者Richard Bridge