React Native Select组件未选择时默认赋值为1的实现问题

根因梳理 #

• 字段名不匹配：Select组件onChange回调中调用setFieldValue存储的字段名为documentLocationsId，但提交时你读取的是valuesToSubmit['documentId']，未选择场景下documentId字段从未被赋值，自然取不到预期值。
• 空值判断逻辑漏洞：你仅判断了值不等于null的场景，但表单未操作的初始状态下，未赋值的字段值为undefined而非null，undefined !== null的结果为true，会直接把undefined赋值给_intfmdocument，不会走到默认值1的分支。
• Select绑定逻辑不对应：Select的value属性绑定的是documentId变量，但你修改值时更新的是documentLocationsId对应的表单字段，二者没有关联，你写的默认值1没有同步到表单的字段集合里。

修复步骤 #

1. 先统一字段名，如果你需要存储的字段是documentId，就修改setFieldValue的第一个参数；如果确实需要用documentLocationsId，就把提交时的取值字段和Select的name属性同步修改即可。
2. 优化空值判断逻辑，覆盖undefined和null两种空场景。
3. 把Select的value绑定和表单字段关联，保证初始默认值同步到表单数据中。

修复后代码示例 #

const submitForm = async(valuesToSubmit) => {
 console.log("valuesToSubmit:= ", valuesToSubmit['documentId'])
 // 空值合并运算符会自动把null、undefined的场景替换为默认值1
 const _intfmdocument = valuesToSubmit['documentId'] ?? 1
 // 后续逻辑
}

<Select 
   isSearchable
   options={docuLoc}
   className={classes.selection}
   // 直接绑定表单对应字段值，空的时候默认取1
   value={values.documentId ?? 1}
   onChange={(itemValue) => {
          setDisplaySelectedDocumentLocation(itemValue)
          // 字段名和提交时读取的保持一致
          setFieldValue("documentId",itemValue.value)
   }}
   name='documentId'
 />

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