Next.js TypeScript 实现带复选框的表格筛选排序功能问题求助

1. 类型声明错误 #

你当前给elavtal声明的类型是单个对象{ [key: string]: any }，但实际赋值的是对象数组，类型完全不匹配，会触发TS类型报错。修复方式：

// 明确声明为对象数组类型，也可以自定义interface进一步规范类型
const elavtal: { productTypeLabel: string; [key: string]: any }[] = [
  { productTypeLabel: "SPOT" },
  { productTypeLabel: "HOURLY SPOT" },
  { productTypeLabel: "FIXED" },
  { productTypeLabel: "BUY PRICE" }
];

同时需要给productType状态声明类型，避免TS默认推断为never[]导致后续赋值报错：

const [productType, setProductType] = useState<string[]>([])

2. 复选框交互逻辑错误 #

当前onChange回调中，取消勾选时直接清空了整个选中数组，会导致只要取消任意一个复选框，所有已选中的选项状态都被清空。正确逻辑是取消勾选时仅过滤掉当前操作的选项值：

onChange={(event) =>
  setProductType((prev) =>
    event.target.checked
      ? [...prev, elavtal.productTypeLabel]
      : prev.filter(item => item !== elavtal.productTypeLabel)
  )
}

3. HTML语法错误 #

<input>是自闭合标签，不支持嵌套子内容，你把选项展示文本写在input标签内部属于无效语法，需要单独用label标签关联复选框：

{elavtal.map((item, i) => {
  const checkboxId = `product-type-${i}`
  return (
    <div key={i}>
      <input 
        type="checkbox" 
        id={checkboxId}
        defaultChecked={false} 
        value={item.productTypeLabel}
        onChange={(event) =>
          setProductType((prev) =>
            event.target.checked
              ? [...prev, item.productTypeLabel]
              : prev.filter(val => val !== item.productTypeLabel)
          )
        }
      />
      <label htmlFor={checkboxId}>{item.productTypeLabel}</label>
    </div>
  )
})}

注：上述代码同时修改了map循环的参数名，避免和外层数组变量名elavtal重复引发命名冲突

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