带有复选框的Nextjs typescript筛选表

Question

我最近刚开始使用Typescript，遇到了一个问题。在javascript中，我解决了这个问题，但现在在Typescript中，我在黑暗中融资。我从一个api和一个表中获得数据，在那里我使用过滤方法来填充表的数据。我需要帮助的是修复按复选框排序和筛选的问题。我嵌入了一个到代码沙盒的链接来重现我的问题。

https://codesandbox.io/s/vibrant-feistel-isspt?file=/pages/index.tsx

const elavtal: { [key: string]: any } = [
{ productTypeLabel: "SPOT" },
{ productTypeLabel: "HOURLY SPOT" },
{ productTypeLabel: "FIXED" },
{ productTypeLabel: "BUY PRICE" }
];
{elavtal.map((elavtal, i) => {
return (
<input type="checkbox" key={i} defaultChecked={false} value={elavtal.productTypeLabel}
onChange={(event) =>
setProductType((prev) =>
event.target.checked
? [...prev, elavtal.productTypeLabel]
: []
)
}
>{elavtal.productTypeLabel}</input>
)
})
}```

Answer 1

定义您的接口"IElAvtal"；作为对象并使用对象的数组"；IElAvtal[]"；

interface IElAvtal {
productTypeLabel: string;
}
const elavtal: IElAvtal[] = [
{ productTypeLabel: "SPOT" },
{ productTypeLabel: "HOURLY SPOT" },
{ productTypeLabel: "FIXED" },
{ productTypeLabel: "BUY PRICE" }
];
elavtal.map((el, i) => {
return (
...
)
}