FormData.append()方法中,一个空格为何导致获取值为空?

FormData.append()方法中,一个空格为何导致获取值为空?

FormData.append()方法详解:一个空格引发的空值bug

在使用FormData对象向表单添加数据时,细微的错误可能导致意想不到的结果。本文分析一个实际案例,解释为什么FormData.append()方法添加字段后,控制台输出该字段值为NULL

问题: 代码使用FormData.append()添加kb_id和doc_id两个字段,kb_id值获取正常,但doc_id始终为null。

代码片段:

const submit = () => {   // ...   const formData = new FormData();   formData.append('kb_id', payload.kb_id);   console.log(formData.get('kb_id')); // 正确输出   formData.append('doc_id ', payload.doc_id); // 注意此处空格   console.log(formData.get('doc_id')); // 输出null   // ... };

原因分析: payload对象中kb_id和doc_id都有有效值。formData.get(‘kb_id’)正常输出,但formData.get(‘doc_id’)返回null的原因在于formData.append(‘doc_id ‘, payload.doc_id);这行代码。 ‘doc_id ‘ (注意末尾空格)与formData.get(‘doc_id’)使用的键名’doc_id’不匹配。 FormData.append()严格区分键名,多余的空格导致获取值失败。

解决方案: 只需移除formData.append(‘doc_id ‘, payload.doc_id);中键名’doc_id ‘后的空格,修改为formData.append(‘doc_id’, payload.doc_id);即可解决问题。 修改后,formData.get(‘doc_id’)将正确返回payload.doc_id的值。

记住,在使用FormData.append()时,务必确保键名准确无误,避免多余的空格或其他字符导致数据获取失败。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享