状态/反应字段未在POST请求中发送到后端

Question

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

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

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

是什么原因造成的？ 以下是相关的代码段。

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

Answer 1

如果值是空数组，则许多序列化和发布数据的库不会发送键/值对。 例如： jQuery具有此行为 。 基本上有两种方法可以解决此问题：

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

2）如果您确实要发送一个空数组（发送一个空数组和根本不发送键/值之间有区别吗？），请使用单个空字符串或其他可能无法发送的值发送该数组输入有效，但您将进行检查以表示该数组为空。

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