React项目将Checkbox改为Radio后功能异常如何解决

问题根源 #

你直接把type改成radio不生效的核心原因是单选框和复选框的交互逻辑完全不同：

• 复选框每个选项独立，支持多选，每个组件单独维护自己的选中状态即可
• 单选框同name属性为一组，组内同一时间只能有一个选项选中，原来每个组件独立维护状态、单独增删购物车商品的逻辑完全不匹配单选的互斥要求
• 另外你现有代码里的useEffect没有配置依赖数组，每次组件渲染都会重复执行，也会导致状态异常

适配单选的修改方案 #

你需要调整状态判断逻辑和购物车操作逻辑，移除冗余的局部选中状态，直接基于全局的购物车数据判断选中状态，同时在选中新选项时先清空同组已选商品：

import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import PropTypes from 'prop-types'
import { useDispatch, useSelector } from 'react-redux'
import shoppingCartActions from '../actions/shoppingCartActions'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'

const DisplayProduct = (props) => {
  // 新增group字段用于区分单选分组，从父组件传入，比如同一类产品（NET/WIFI等）传相同的group值
  const { product, id, group } = props
  const dispatch = useDispatch()
  const { t } = useTranslation()
  const { brikksid, addressid } = useParams()

  const getId = () => {
    if (brikksid) {
      return brikksid
    }
    if (addressid) {
      return addressid
    }
  }
  const shoppingCart = useSelector((state) => state.shoppingCartReducer.cart[getId()] || [])
  
  // 移除局部checked状态，直接从购物车判断当前产品是否选中
  // 注意：如果product是引用类型，建议换成用product.id等唯一标识判断，避免引用不同导致判断错误
  const isChecked = shoppingCart.some(item => item.id === product.id)

  const generateLabel = () => {
    if (!product.charges) {
      return product.name
    }
    const strings = product.charges.map(charge => {
      return charge.recurring ? ` ${charge.amount},- ${t('perMonth')}` : ` ${charge.amount},- ${t('coverage.establishmentFee')}`
    })
    return product.name + strings.join()
  }

  const onChange = () => {
    // 单选场景如果允许取消选中可以保留这段逻辑，要求必选一个的话可以删掉
    if (isChecked) {
      dispatch(shoppingCartActions.removeProduct(product, id))
      return
    }
    // 选中新选项前，先删除当前单选组内所有已选的商品
    // 假设你的product上有category字段标识所属分组，和传入的group对应，根据你的实际字段调整
    shoppingCart.filter(item => item.category === group).forEach(oldProduct => {
      dispatch(shoppingCartActions.removeProduct(oldProduct, id))
    })
    // 加入当前选中的商品
    dispatch(shoppingCartActions.addProduct(product, id))
  }

  return (
    <Form.Check
      type="radio"
      checked={isChecked}
      label={generateLabel()}
      // 同组单选的name保持一致，用group字段区分不同的单选组
      name={group}
      onChange={onChange}
    />
  )
}

DisplayProduct.propTypes = {
  product: PropTypes.object.isRequired,
  id: PropTypes.string.isRequired,
  // 新增group参数必填，用于区分单选分组
  group: PropTypes.string.isRequired
}

export default DisplayProduct

额外注意事项 #

1. 父组件调用DisplayProduct的时候需要传入group参数，同一单选组的所有选项group值保持一致，比如所有网络套餐的group设为net，所有电视套餐的group设为tv
2. 如果你的购物车存储的product和传入的product不是同一个引用，一定要用产品唯一id（比如product.id）判断是否相等，不要直接用includes，会出现判断错误
3. 如果业务要求单选组必须选一个不能取消，删掉onChange里判断已选中就删除的逻辑即可

内容的提问来源于stack exchange，提问作者Sri p