[shadcn/ui] “Expected number, received string” というエラーが発生する時の解決方法

Next.js
投稿日: カテゴリー Next.js/Reactタグ

shadcn/uiで “Expected number, received string” というエラーが発生する時の解決方法について説明します。

shadcn/uiのSelectコンポーネントでnumber型の値を扱う時に、このエラーが発生しました。

// 修正前
<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
// 修正後
<Select onValueChange={(value) => field.onChange(Number(value))} defaultValue={field.value.toString()}>

SelectItemコンポーネントは以下のように記述しています。valueにnumber型の値は代入できないようです。

<SelectItem key={item.id} value={item.count.toString()}>{item.count}</SelectItem>

広告