为什么使用formData.append添加了一个字段后，console.log得到的该字段值为null？

Question

使用formData.append(key, value)添加值后，console刚才的字段值发现值为null。

const submit = () => {
      // ···
      console.log(payload);
      const formData = new FormData();
      debugger
      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'))
      debugger
      // ···
}

如上图所示:
第一次打印的payload值有个字段kb_id和doc_id，且2个字段都为String类型的值；
第二次打印的为添加到formData的kb_id字段，能展示正确的值；
第三次打印的为添加到formData的doc_id字段，此时打印的值为null；

这段函数是打断点一步步执行的，中间没有其它操作。
请教一下为什么console的doc_id字段值为null。

希望console的formData的doc_id字段值为正确的payload.doc_id值。

Answer 1

formData.append('doc_id ', payload.doc_id);
console.log(formData.get('doc_id'))

append 的 key 为 "doc_id " 而不是 "doc_id"，多了一个空格。

Answer 2

光这样看是没问题，但是很有可能你的 formData.append('doc_id ', payload.doc_id) 添加表单值的时候，payload.doc_id 的值就是 null。

所以把你上方的 console.log(payload) 调整为 console.log(JSON.stringify(payload)) 看看是否在 formData.appdend 时 payload 对象上有正确的 doc_id 值。