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

时间:2018-01-24 16:44:31

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

所以我在状态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));

1 个答案:

答案 0 :(得分:1)

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

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

2)如果你真的想发送一个空数组(也许发送空数组和不发送键/值之间有区别?),那么发送一个空字符串或其他一些值的数组不可能是有效的输入,但你会检查是否意味着数组是空的。

我之前遇到的一件棘手的事情 - 如果你正在使用rspec进行测试,那么rspec的post方法如果值为空数组则不会删除键/值;它按原样发送数据。因此,您可能希望添加其他测试,这些测试表示客户端数据在序列化之后的样子。