Shadcn/ui Select组件选择选项时无法更新状态的问题求助

你的代码有几个关键错误，导致状态无法更新，修正方案如下：

错误点分析 #

• Shadcn的Select组件的onValueChange属性是绑定在根<Select>组件上的，不是每个<SelectItem>，你之前把它放在选项上完全无效。
• 你写的() => (value => setPractices(value))是嵌套箭头函数，相当于返回了一个未执行的函数，根本不会触发状态更新。
• 初始状态practices是数字类型，但Select选项的value都是字符串，类型不匹配会导致显示和更新异常。

修正后的代码 #

"use client"
import { useState } from "react"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function Home() {
  // 初始状态设为字符串，和选项value类型一致
  const [practices, setPractices] = useState("1")

  return (
    <>
      <h1>{practices}</h1>
      <div className="flex justify-between w-2/3">
        Aantal praktijken
        {/* 将onValueChange绑定在Select根组件，直接用setPractices接收选中值 */}
        <Select onValueChange={setPractices}>
          <SelectTrigger className="w-[60px]">
            {/* 用value绑定当前状态，确保显示选中的值 */}
            <SelectValue value={practices} placeholder="0" />
          </SelectTrigger>
          <SelectContent>
            {/* 每个选项只需要设置value，无需额外绑定事件 */}
            <SelectItem value="1">1</SelectItem>
            <SelectItem value="2">2</SelectItem>
            <SelectItem value="3">3</SelectItem>
            <SelectItem value="4">4</SelectItem>
            <SelectItem value="5">5</SelectItem>
            <SelectItem value="6">6</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </>
  );
}

可选：使用数字类型的状态 #

如果希望practices保持数字类型，只需在更新时转换类型：

<Select onValueChange={(value) => setPractices(Number(value))}>

同时初始状态改为：

const [practices, setPractices] = useState(1)

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