reduxForm v5.3.1 复选框上的不受控制/受控警告答案

【问题标题】：reduxForm v5.3.1 uncontrolled/controlled warning on checkboxreduxForm v5.3.1 复选框上的不受控制/受控警告
【发布时间】：2023-04-01 19:43:01
【问题描述】：

所以，这里是警告：

Warning: UserInviteForm is changing an uncontrolled input of type checkbox to be controlled.

查看 this reduxForm v5 和其他的票后，我似乎收到了这个警告，因为该字段的初始值未定义，因此需要使用字段值 || 初始化输入值属性“”。

再进一步research，受控复选框需要将选中的属性设置为一个值。

所以我的假设是清除警告的方法是以两种方式之一写入输入标签：

<input
  {...isPrimary}
  value={isPrimary.value || ''}
  type="checkbox"
>

或

<input
  {...isPrimary}
  checked={isPrimary.checked || ''}
  type="checkbox"
>

为了更好地衡量，我还尝试了checked={isPrimary.checked || false} 和value={isPrimary.value || false} 以及两者的组合。

我什至尝试在组件挂载时设置isPrimary 的checked 和value 属性，但仍然无法摆脱警告。

另外，我想补充一点，我知道有一个 reduxForm v6 发布，但这是我们正在努力修复的已部署应用程序的当前版本，reduxForm v6 将出现在我们应用程序的未来部署版本中。

有人对解决这个问题有任何见解吗？

【问题讨论】：

标签： forms reactjs redux-form

【解决方案1】：

我又尝试了一件事并找到了解决方案。

我可以通过在连接 reduxForm 时设置字段的初始值来实现此功能，然后将输入的值设置为该初始值。

UserInviteFormContainer = reduxForm({
 form: FORM_ID,
   fields: FIELD_NAMES,
   initialValues: {
     isPrimary: false,
   },
   validate,
})(UserInviteFormContainer);


<input
 {...isPrimary}
 value={isPrimary.initialValue || ''}
 type="checkbox"
>

【讨论】：