狀態/反應字段未在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方法不會刪除鍵/值（如果值是空數組）； 它按原樣發送數據。 因此，您可能需要添加其他測試，以表示客戶端數據在序列化后的外觀。