Typescript 是的，没有获得 headlessui 组合框值

我正在使用Headlessui Combobox组件，但在与Yup一起使用时遇到了问题.我使用组合框 Select 的值被写入selectedMemory状态变量，没有任何问题，但YUP仍然抛出required错误消息.我肯定漏掉了一点.

表格的类型

// form values for Yup
type RewardCreateFormValues = {
    name: string
    price: number
    quantity: number
    reward: string
}

type Reward = {
    id: string
    name: string
    price: number
    quantity: number
}

const rewards: Reward[] = [
    {
        id: "1",
        name: "Reward 1",
        price: 100,
        quantity: 100
    },
    {
        id: "2",
        name: "Reward 2",
        price: 200,
        quantity: 200
    },
    {
        id: "3",
        name: "Reward 3",
        price: 300,
        quantity: 300
    }
]

为Combobox创建状态和备忘筛选奖励

    const [selectedReward, setSelectedReward] = useState(rewards[0])
    const [query, setQuery] = useState("")

    // it filters the rewards according to the query
    let filteredReward =
        query === ""
            ? rewards
            : rewards.filter(reward => {
                  return reward.name.toLowerCase().includes(query.toLowerCase())
              })

    const rewardOptions = useMemo(() => {
        return filteredReward.map((reward: Reward) => ({
            name: reward.name,
            id: reward.id
        }))
    }, [filteredReward])

使用YUP和FORM初始值进行对象验证

    const validationSchema = Yup.object().shape({
        name: Yup.string().required("Required"),
        price: Yup.number().required("Required"),
        quantity: Yup.number().required("Required"),
        reward: Yup.string().required("Required")
    })

    const initialValues: RewardCreateFormValues = {
        name: "",
        price: 0,
        quantity: 0,
        reward: ""
    }

和组合框；

                           <GridItem colSpan={3}>
                                <FormControl>
                                    <Box>
                                        <FormLabel>Select a Reward</FormLabel>
                                        <Combobox as="div" value={selectedReward} onChange={setSelectedReward}>
                                            <Combobox.Button as="div">
                                                <Combobox.Input
                                                    className="w-full rounded-md border-0 bg-white py-2 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-[#E2E8F0] focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                                    name="reward"
                                                    onChange={(event: any) => setQuery(event.target.value)}
                                                    placeholder="Select a Reward"
                                                    displayValue={(selectedReward: Reward) =>
                                                        selectedReward ? selectedReward.name : ""
                                                    }
                                                />
                                            </Combobox.Button>
                                            <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                                                {rewardOptions.map(reward => (
                                                    <Combobox.Option
                                                        key={reward.id}
                                                        value={reward}
                                                        className={({ active }) =>
                                                            classNames(
                                                                "relative cursor-default select-none py-2 pl-3 pr-9",
                                                                active ? "bg-indigo-600 text-white" : "text-gray-900"
                                                            )
                                                        }
                                                    >
                                                        {({ active, selected }) => (
                                                            <>
                                                                <Box display={"flex"}>
                                                                    <Text
                                                                        as={"span"}
                                                                        className={classNames(
                                                                            "truncate",
                                                                            selected ? "font-semibold" : "font-normal"
                                                                        )}
                                                                    >
                                                                        {reward.name}
                                                                    </Text>
                                                                </Box>

                                                                {selected && (
                                                                    <Text
                                                                        as={"span"}
                                                                        className={classNames(
                                                                            "absolute inset-y-0 right-0 flex items-center pr-4",
                                                                            active ? "text-white" : "text-indigo-600"
                                                                        )}
                                                                    >
                                                                        <CheckIcon
                                                                            className="h-5 w-5"
                                                                            aria-hidden="true"
                                                                        />
                                                                    </Text>
                                                                )}
                                                            </>
                                                        )}
                                                    </Combobox.Option>
                                                ))}
                                                <Combobox.Option
                                                    value={""}
                                                    className={
                                                        "relative cursor-default select-none py-2 pl-3 pr-9 bg-indigo-100 hover:bg-indigo-600 hover:text-white text-gray-900"
                                                    }
                                                    onClick={onOpen}
                                                >
                                                    <Box
                                                        display={"flex"}
                                                        flexDirection={"row"}
                                                        gap={2}
                                                        alignItems={"center"}
                                                    >
                                                        <PlusIcon className="h-5 w-5" aria-hidden="true" />
                                                        <button>Create a Reward</button>
                                                    </Box>
                                                </Combobox.Option>
                                            </Combobox.Options>
                                        </Combobox>
                                    </Box>
                                    <ErrorMessage name="reward" component="p" className="mt-2 text-sm text-red-600" />
                                </FormControl>
                            </GridItem>
                            <GridItem colSpan={3}>
                                <Box display={"flex"} justifyContent="flex-end">
                                    <Button
                                        isLoading={isSubmitting}
                                        isDisabled={isSubmitting}
                                        type="submit"
                                        colorScheme="indigo"
                                        variant="solid"
                                    >
                                        Create Listing
                                    </Button>
                                </Box>
                            </GridItem>

正如我在上面提到的，问题是即使selectedMemory的内容和值发生变化，Yup也会不断抛出所需的错误.