如何使用 express 将表单数据从 React App 发布到后端？答案

【问题标题】：How to POST form-data from React App to the backend using express?如何使用 express 将表单数据从 React App 发布到后端？
【发布时间】：2021-06-30 18:06:51
【问题描述】：

我有两个班级：

行（儿童班）
我的电子表格（父类）

我正在尝试做这样的事情：

行：

class Row extends React.Component {
  constructor(props, ref) {
    super(props);
    this.state = { selectedFile: null}
    this.handleUpload = this.handleUpload.bind(this);
  }

//This handleUpload is being called by the parent class of this Row class through ref.
  handleUpload(ev) {
    ev.preventDefault();
    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);
    data.append('comment',this.comment.value);
    data.append('id', this.fileName.id);

    fetch('http://localhost:8000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
        this.setState({ selectedFile: `http://localhost:8000/${body.file}` });
      });
    });
  }


  rowCreator() {
    let row = []
    for (var i = 0; i < 10; i++) {
      row.push(
        <td>
          <div>
            <input type="file" name={`file${this.props.id*10 + i}`} id={this.props.id*10 + 1} ref={(ref) => { this.uploadInput = ref; }}/>
            <input type="text" name={`fileName ${this.props.id*10 + i}`} ref={(ref) => { this.fileName = ref; }}  placeholder="Name the file with extension"/>
            <input type="text" ref={(ref) => { this.comment = ref; }} placeholder="Comment"/>
          </div>
        </td>
      )
    }
    return row
  }

  render() {
    return (
      <tr>
        <td class="align-middle ">
          <div class="cell">
            <input type="text" placeholder={this.props.id + 1} />
          </div>
        </td>
        {this.rowCreator()}
      </tr>
    )
  }
}

在 mySpreadsheet 中，我使用Row 类在表中创建每一行，如下所示：

            <tbody id="tbody">
              {this.state.data.map(id => (
                <Row id={id} ref={this.rowRef} />
              ))}
            </tbody>

我正在使用 rowRef 中的 handleUpload() 函数（子）：

this.rowRef = React.createRef();

upload(ev) {
   this.rowRef.current.handleUpload(ev);
}

<button onClick={this.upload}>
   Upload Files
</button>

但我在通过我的网站执行 POST 请求时遇到错误 (500)。是因为我在Row 中使用的ref，例如uploadInput，用于在handleUpload 中附加数据吗？有什么方法可以为我表中的所有单元格创建一个唯一的 ref 吗？或者我可以使用id 或name 之类的其他东西，我在每次迭代中使用this.props.id*10 + i 为所有不同的单元格制作独特的东西，同时为一行制作列？

【问题讨论】：

标签： node.js reactjs api express backend

【解决方案1】：

您可以为映射元素创建 refs，并根据它们的索引或 id 将其放入数组中。

// constructor state part
constructor() {
  this.refs = [];
}

// render part
{this.state.data.map(id => (
   return <Row id={id} ref={itemRef => this.refs[id] = itemRef} />
))}

在我看来，您应该将值而不是组件本身保存在数组中。

Id 必须是唯一的，如果 map 参数是一个对象，你应该使用一个唯一的属性而不是 map 自带的 key。如果您使用键，React 将不会在您更新状态时跟踪您的组件。

【讨论】：