如何根据复选框/框状态更改 URL 正文？答案

【问题标题】：Ho to Change URL body according to checked box/boxes state?如何根据复选框/框状态更改 URL 正文？
【发布时间】：2021-06-23 12:33:42
【问题描述】：

在我的 React/JS 项目中，用户检查用户希望查看该类型数据的 3 个选项中的一个或多个。这些数据类型是final、generation和availability。所有这 3 种数据类型都有不同的 url。我需要发送请求这些在表单中选中的数据类型，我不会将请求发送给未选中的。我需要一个逻辑来检查哪个被选中，哪个未被选中。我将这些数据类型状态保存在一个名为 datatypes 的数组中，就像这样。

  {
    "id":"final",
    "isChecked": false
  },
  {
    "id":"generation",
    "isChecked": false
  },
  {
    "id":"availability",
    "isChecked": false
  }
]

我将 isChecked 属性的状态更改为真或假。最后我需要进行检查并发送 isChecked= true 请求。但是我不想这样操作：

**if**(datatypes[0].isChecked===**true** && datatypes[1].isChecked===**true** && datatypes[0].isChecked===**true**){

//request for 3 of data type

}
**else if**(datatypes[0].isChecked===**true** && datatypes[1].isChecked===**true** && datatypes[0].isChecked===**false**){

//request for first two data type(final, generation) and not for the 3. one 

}
**else if**()...

这不是进行此检查的正确方法。那么对于这种情况，最好的和简短的逻辑是什么？我会非常感激每一个帮助和建议，提前谢谢:)

【问题讨论】：

标签： javascript reactjs typescript if-statement

【解决方案1】：

我认为您在询问如何将可能性列表过滤为仅包含已选中选项的可操作列表。这基本上是一个过滤器然后映射操作，如下所示。

const possibilities = [
  {
    "id":"final",
    "isChecked": false
  },
  {
    "id":"generation",
    "isChecked": false
  },
  {
    "id":"availability",
    "isChecked": false
  }
]

// if you need to do a single request for each checked option
function doMyRequest(option: string) {
  ...your request code here
}
possibilities
  .filter(possibility => possibility.isChecked)
  .forEach(possibility => doMyRequest(possibility));

// or if you need to do one request with all checked options
function doMyRequest(options: string[]) {
  ...your request code here
}

doMyRequest(
  possibilities
    .filter(possibility => possibility.isChecked)
    .map(possibility => possibility.id)
);

【讨论】：