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文件并将其作为prop传递，则无法使用。当我console.log的props值返回未定义。

请参见下面的代码：

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 => {

因为我试图解构道具，但实际上我必须这么做。实际上，它看不到任何价值。希望对您有所帮助！编码愉快！

React-Final-Form csv上传提交

1 个答案: