Formik resetForm不重置嵌套值（数组和对象）

Question

我是Formik的新手，我正在尝试创建带有一些嵌套值的表单。这是我的表单架构的一个示例：

const FormikSearch = withFormik({
   mapPropsToValues(){
      return {
         "FDID": '',
         "Fire dept name": '',
         "HQ city": '',
         "HQ state": '',
         "HQ zip": '',
         "County": '',
         "Dept Type": [],
         "Organization Type": [],
         "Active Firefighters - Career": { use: null, min:'', max: '' },
         "Active Firefighters - Volunteer": { use: null, min:'', max: '' },
         "Active Firefighters - Paid per Call": { use: null, min:'', max: '' },
         "Non-Firefighting - Civilian": { use: null, min:'', max: '' },
         "Non-Firefighting - Volunteer": { use: null, min:'', max: '' },
      }
   },
   handleSubmit(values){
      console.log(values)
   }
})(Search)

在表单中，我映射了一些列表以创建一组复选框。对于“部门类型”或“组织类型”组，根据是否选中了复选框，在formik values对象中从阵列中添加或删除复选框。对于“消防员”值（任何带有{ use: null, min:'', max: '' }初始值的值），选中此框将切换use的值，如果use为true，则将启用其他值表单字段要填写。

const Search = ({
   values,
   setFieldValue,
   resetForm
}) => {

   return ( 

      //-- various simple text fields --//

      {deptTypes.map(type =>
         <label key={type.value}>
            <input 
               type="checkbox"
               name="Dept Type"
               value={type.value}
               checked={values["Dept Type"].includes(type.value)}
               onChange={ e => {
                  if (!values["Dept Type"].includes(type.value)){
                     values["Dept Type"].push(type.value)
                  } else {
                     const idx = values["Dept Type"].indexOf(type.value)
                     values["Dept Type"].splice(idx, 1)
                  }
                  setFieldValue("Dept Type", values["Dept Type"])
               }}
            />
            <span>{type.name}</span>
         </label>
      )}

      {/* similar map over "Organization Type" array */}

      {firefighterTypes.map( type => (
         <div key={type} >
            <label>
               <input 
                  type="checkbox" 
                  name={type}
                  checked={values[type].use}
                  onChange={ e => {
                     if (!values[type].use){
                        values[type].use = true
                     } else {
                        values[type].use = false
                     }
                     setFieldValue(type.use, values[type].use)
                  }} />
               <span>{type}</span>
            </label>

            <div className={`min-max-inputs ${!values[type].use ? 'disabled' : ''}`}>
               <label>
                  <span>At Least:</span>
                  <Field 
                     type="number" 
                     name={`${type}.min`}
                     min="0"
                     disabled={!values[type].use} />
               </label>
               <label>
                  <span>At Most:</span>
                  <Field 
                     type="number" 
                     name={`${type}.max`}
                     max="0"
                     disabled={!values[type].use} />
               </label>
            </div>

         </div>
      ))}
   )
}

抱歉，这有点冗长，我想说明为什么我要这样组织事情。 values对象在处理表单时正在按预期方式响应。在表格末尾，我有用于“清除”和“搜索” /“提交”的按钮。 “清除”按钮调用resetForm函数（提交表单后，提交按钮也将调用它）。

预期的行为：

将表单值返回到mapPropsToValues中定义的初始值，并且该表单为空白，就像用户第一次打开它时一样。

当前行为：

所有表单值都返回其初始值 （以数组或对象开头的值除外）。数字和文本字段全部清空，但复选框不会返回为空。这也反映在表单值的console.log中，即使在调用resetForm之后，表单值也会保留它们的值。

Codesandbox demonstrating the problem

单击“清除”或“搜索”按钮会将values登录到控制台，以便您可以看到Formik如何响应用户输入。感谢您的阅读。