React开发中如何统计URL参数中seats字段对应的座位总数量

核心逻辑 #

你从URL参数中拿到的seats是逗号拼接的字符串，只需将字符串按逗号拆分为数组，统计数组长度即可得到座位总数量。如果需要排除重复选择的座位，额外做一次去重处理即可。

代码修改示例 #

// 推荐将业务数据存在组件state中，符合React数据管理规范，避免全局变量污染
state = {
  movieInfo: {},
  totalSeatCount: 0, // 统计含重复的总座位数
  uniqueSeatCount: 0 // 统计去重后的座位数，不需要可删除
}

componentDidMount() {
    const movieInfo = queryString.parse(this.props.location.search)
    // 空值兼容：如果URL没有seats参数，默认赋值为空数组避免报错
    const seatList = movieInfo.seats ? movieInfo.seats.split(',') : []
    const totalSeatCount = seatList.length
    // 去重逻辑，不需要可以删除
    const uniqueSeatList = [...new Set(seatList)]
    const uniqueSeatCount = uniqueSeatList.length

    // 统一更新state，后续渲染直接取state中的值即可
    this.setState({
      movieInfo,
      totalSeatCount,
      uniqueSeatCount
    })

    // 测试输出，以你给出的示例URL参数为例，此处totalSeatCount输出为6，uniqueSeatCount输出为2
    console.log('总座位数：', totalSeatCount)
    console.log('去重后座位数：', uniqueSeatCount)
}

关键说明 #

• 字符串拆分：split(',')方法会将逗号分隔的字符串转为数组，比如"A6,5,5,A6,A6,5"会转为["A6","5","5","A6","A6","5"]，取数组length属性即可得到总数
• 去重逻辑：new Set()构造函数会自动移除数组中的重复项，再通过扩展运算符...转回普通数组即可得到无重复的座位列表
• 渲染使用：后续需要在页面展示座位数时，直接在render方法中调用this.state.totalSeatCount即可，示例：<p>你已选择{this.state.totalSeatCount}个座位</p>
• 不推荐使用全局var声明movieData，全局变量在组件多次渲染、复用时会出现数据串扰问题，存在state中是React的标准实现方式

内容的提问来源于stack exchange，提问作者Ryan Fonseka