React-Final-Form csv 上传提交

Question

我正在使用 React-Final-Form 上传和提交一个简单的 csv 文件。我已经测试了 API 和 headers 配置，如果我使用 PostMan，一切正常。我还根据 API 文档将 csv 值硬编码到我的 const data 中，一切正常。

硬编码示例：

// Example HARDCODED = WORKS PERFECTLY!!
  const data = {
    "invitation": {
      "file": "Email\nuser_1@gmail.com\nuser_2@gmail.com\n"
    }
  }

如果我想从上传的输入中收集 cvs 文件并将其作为 prop 传递，这是行不通的。当我 console.log 道具值时 returns undefined.

查看下面我的代码：

const handleSubmitOnClick = ({
  file
}) => {

  console.log(file)
  const url = 'http://localhost:3000/api/v1/invitations/upload';
  const headers = {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }

  const data = {
    "invitation": {
      "file": file   <==== *** HERE THE ISSUE ****
    }
  }

  axios.post(url, data, headers)
  .then(response => console.log(response))
  .catch(err => console.log(err))
}

const JoinTesting = () => 
    <Form 
      onSubmit={handleSubmitOnClick}
    >
      {
        ({ 
          handleSubmit, 
          values, 
          submitting,
        }) => (
        <form onSubmit={handleSubmit} encType="multipart/form-data">

          <Field 
            name="invitation[file]"
            placeholder='Upload csv file'
            validate={required}
          >
            {({ input, meta, placeholder }) => (
              <div className={meta.active ? 'active' : ''}>
                <label>{placeholder}</label>
                <input 
                  {...input} 
                  type='file' 
                  placeholder={placeholder} 
                  className="join-field-input"

                />
                {meta.error && meta.touched && <span className="invalid">{meta.error}</span>}
                {meta.valid && meta.dirty && <span className="valid">Great!</span>}
              </div> ...etc..

我得到的错误是：

Error: Request failed with status code 500
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

这很奇怪，因为正如我所说，如果我对文件值进行硬编码，一切正常。

在 Browser networks 选项卡中，Payload returns {invitation:{}} 有什么想法吗？

Answer 1

我找到问题了。

这是我做错的地方：

const handleSubmitOnClick = ({
  file
}) => {

应该是：

const handleSubmitOnClick = file => {

因为我试图解构道具，而实际上我不应该这样做。实际上，它看不到任何值。我希望它能帮助别人！编码愉快！

React-Final-Form csv 上传提交

React-Final-Form csv upload submit

reactjs

csv

react-final-form