React多input type checkbox字段状态异常处理及代码重构咨询

• 状态更新异步导致取值错误：React中useState的更新方法是异步批量执行的，调用set方法后立刻读取对应state，拿到的还是本次渲染周期的旧值。初始状态为false时，首次点击触发set更新为true，但传递给showImage的还是旧值false，所以首次点击无效果；第二次点击时拿到的是上一次更新后的true，此时set为false，传递的是true，就出现了勾选（set成true）传旧值false（隐藏）、取消勾选（set成false）传旧值true（显示）的反向逻辑。
• 事件绑定不统一：city、abstract分类的复选框绑定的是onClick而非onChange，虽然不影响核心逻辑，但不符合表单元素的事件使用规范，可能在部分场景下出现异常。

如果不想大改原有结构，只需要先计算好新的状态值，再同时用于state更新和showImage传参即可：

const handleImages = ( e, type ) => {
  if ( type === 'nature' ) {
    // 先计算新值，避免读取异步更新前的旧state
    const newChecked = !isNatureChecked
    setIsNatureChecked(newChecked);
    showImage( 0, newChecked && new Image.Nature() );
  } else if ( type === 'city' ) {
    const newChecked = !isCityChecked
    setIsCityChecked(newChecked);
    showImage( 1, newChecked && new Image.City() );
  } else if ( type === 'abstract' ) {
    const newChecked = !isAbstractChecked
    setIsAbstractChecked(newChecked);
    showImage( 2, newChecked && new Image.Abstract() );
  } 
}
// 同时把return里的onClick统一改成onChange
return (
  <div>
    <input type="checkbox" checked={isNatureChecked} onChange={( e ) => handleImages( e, 'nature' )} />
    <input type="checkbox" checked={isCityChecked} onChange={( e ) => handleImages( e, 'city' )} />
    <input type="checkbox" checked={isAbstractChecked} onChange={( e ) => handleImages( e, 'abstract' )} />
  </div>
)

把所有分类配置抽为独立的常量数组，用单个对象类型的state存储所有勾选状态，遍历渲染复选框，完全消除重复的state声明和条件判断：

第一步：抽离分类配置 #

// 放在组件外部，避免每次渲染重复生成
const IMAGE_CATEGORIES = [
  { type: 'nature', index: 0, ImageConstructor: Image.Nature },
  { type: 'city', index: 1, ImageConstructor: Image.City },
  { type: 'abstract', index: 2, ImageConstructor: Image.Abstract },
  // 剩余12个分类直接往这个数组里加即可，无需修改其他逻辑
]

第二步：合并state为单个对象 #

const Images = () => {
  // 初始化所有分类的勾选状态为false
  const [checkedMap, setCheckedMap] = useState(
    IMAGE_CATEGORIES.reduce((acc, cate) => {
      acc[cate.type] = false
      return acc
    }, {})
  )

第三步：统一事件处理逻辑，消除条件判断 #

const handleCheck = (e, category) => {
    const newChecked = !checkedMap[category.type]
    // 用函数式更新保证state取值正确
    setCheckedMap(prev => ({
      ...prev,
      [category.type]: newChecked
    }))
    showImage(category.index, newChecked && new category.ImageConstructor())
  }

第四步：遍历渲染复选框 #

return (
    <div>
      {IMAGE_CATEGORIES.map(category => (
        <input
          key={category.type}
          type="checkbox"
          checked={checkedMap[category.type]}
          onChange={e => handleCheck(e, category)}
        />
      ))}
    </div>
  )
}

重构后新增分类只需要在IMAGE_CATEGORIES数组中新增一项配置即可，无需修改其他逻辑，可维护性大幅提升。

内容的提问来源于stack exchange，提问作者s.khan