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

Question

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

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

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

什么会导致这种情况？以下是相关的代码片段。

1) add/remove 个元素的函数（注意箭头，这是删除元素的地方）

  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));

Answer 1

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

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

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

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

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

React/Rails field in state not sent to backend in POST request

ruby-on-rails

reactjs

post

state

splice