时间戳

首页 > 解决方案 > React-Final-Form csv 上传提交

reactjs - React-Final-Form csv 上传提交

问题描述

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

硬编码示例：

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

如果我想从上传的输入中收集 cvs 文件并将其作为道具传递，它不起作用。当我 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)

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

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

标签： reactjscsvreact-final-form

解决方案

我发现了这个问题。

这就是我做错了什么：

const handleSubmitOnClick = ({
  file
}) => {

应该是：

const handleSubmitOnClick = file => {

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

推荐阅读