React中如何实现checkbox勾选状态同步state数组并生成接口查询参数

核心问题说明 #

• 渲染就业类型多选框时存在id重复、value值绑定错误的问题，导致选中值不能正确写入存储数组
• 数组更新后未触发接口重新请求，无法获取对应筛选结果
• 接口地址拼接时存在换行，会生成带空格的无效请求地址

1. 修正多选框渲染逻辑 #

renderEmploymentTypesList = () => {
  return employmentTypesList.map(empType => (
    <li key={empType.employmentTypeId} >
      <input
        type="checkbox"
        className="checkbox-input"
        // 每个checkbox绑定唯一id，关联对应label
        id={empType.employmentTypeId}
        // value绑定当前就业类型的唯一id
        value={empType.employmentTypeId}
        onChange={this.onChangeEmployTypesIds}
      />
      <label htmlFor={empType.employmentTypeId} className="label-name">
        {empType.label}
      </label>
    </li>
  ))
}

2. 修正选中状态变更逻辑，更新后自动触发接口请求 #

onChangeEmployTypesIds = event => {
  const {employmentTypeListId} = this.state
  const isChecked = event.target.checked
  const currentId = event.target.value
  if (isChecked) {
    this.setState(
      {
        employmentTypeListId: [...employmentTypeListId, currentId],
      },
      // state更新完成后回调触发接口请求
      () => this.getJobs()
    )
  } else {
    const filtered = employmentTypeListId.filter(
      eachItem => eachItem !== currentId,
    )
    this.setState(
      {employmentTypeListId: filtered},
      () => this.getJobs()
    )
  }
}

3. 修正接口地址拼接逻辑 #

getJobs = async () => {
  this.setState({apiStatus: apiConstantStatus.inProgress})
  const jwtToken = Cookies.get('jwt_token')
  const {employmentTypeListId, activeSalaryId, searchInput} = this.state

  const employmentType = employmentTypeListId.join(',')
  // 移除url中的换行，避免生成无效地址
  const apiUrl = `https://apis.ccbp.in/jobs?employment_type=${employmentType}&minimum_package=${activeSalaryId}&search=${searchInput}`
  const options = {
    headers: {
      Authorization: `Bearer ${jwtToken}`,
    },
    method: 'GET',
  }
  // 原有接口请求后续逻辑保持不变即可
}

修复后勾选多选框时对应employmentTypeId会自动加入employmentTypeListId数组，取消勾选时自动从数组移除，数组会通过join(',')拼接为逗号分隔的字符串作为查询参数传入接口，完全符合需求。

内容的提问来源于stack exchange，提问作者M VINOD KUMAR