React-Final-Form csv上载提交

Question

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

硬编码示例：

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

如果我想从上传的输入中收集cvs文件，并将其作为一个属性进行传递，它将不起作用。当我定义props值时，它返回console.log。

请看下面的代码：

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)

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

在浏览器网络选项卡中，负载返回{邀请：{}}有什么想法吗？

Answer 1

我找到问题所在了。

这就是我做错的地方：

const handleSubmitOnClick = ({
  file
}) => {

应该是：

const handleSubmitOnClick = file => {

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