状态中的 React/Rails 字段未在 POST 请求中发送到后端答案

【问题标题】：React/Rails field in state not sent to backend in POST request状态中的 React/Rails 字段未在 POST 请求中发送到后端
【发布时间】：2018-01-24 16:44:30
【问题描述】：

所以我有一个状态为bullet_points: [] 的字段，它是一个元素数组。

我的组件中有一个函数可以从这个数组中添加/删除元素。要保存更改，单击提交会将product: this.state 作为 POST 请求中的参数发送到我的后端。

如果数组不为空，后端只接收bullet_points。如果我清除所有元素的字段，它永远不会发送到后端。

这是什么原因造成的？下面是相关代码sn-ps。

1) 添加/删除元素的功能（注意箭头，这是删除元素的地方）

  updateList(evt) {
    evt.preventDefault();

    let elements = this.state[evt.target.dataset.type];
    let idx = parseInt(evt.target.dataset.index);
    let new_element = evt.target.dataset.type == "durations" ? 30 : "";

    if (isNaN(idx)) {
      elements.push(new_element);
    } else {
      if (evt.target.dataset.delete) {      <----------
        elements.splice(idx, 1);
      }
      else {
        elements[idx] = evt.target.value;
      }
    }
    this.setState({ [evt.target.dataset.type]: elements });
  }

2) POST 请求到后端

API.put(`coach/products/${this.props.params.id}`, {
    product: this.state
  }, function(res) {
    this.closeModal();
    Alert.success('<p class="small-body-text">Your changes have been saved</p>', {
      position: "top-right",
      effect: "scale",
      timeout: 5000
    });
  }.bind(this));

【问题讨论】：

bullet_points 在哪里？我在您的代码中看不到这一点
在this.state: {}
this.state 在哪里？您的问题主要是关于 bullet_points 并且您的代码中缺少它本身。详细贴出来帮助你更好
为什么要向后端发送一个空数组？

标签： ruby-on-rails reactjs post state splice

【解决方案1】：

如果值为空数组，许多序列化和发布数据的库不会发送键/值对。例如：jQuery has this behavior。基本上有两种方法可以处理这个问题：

1) 在后端，检查 post 参数中是否存在 key。如果不存在，则将其视为空数组。

2) 如果你真的想发送一个空数组（也许发送一个空数组和根本不发送键/值有区别？），然后用一个空字符串或其他一些值发送数组不可能是有效输入，但您将检查是否意味着数组为空。

我之前遇到过一件棘手的事情 - 如果您使用 rspec 进行测试，如果值为空数组，则 rspec 的 post 方法不会删除键/值；它按原样发送数据。因此，您可能需要添加额外的测试来表示客户端数据在被序列化后的样子。

【讨论】：