"use client";
import { useState, useMemo } from "react";
import Header from "@/components/Header";
import PhoneInput from "@/components/PhoneInput";
import countryList from "react-select-country-list";
import Select from "react-select";
export default async function Dashboard() {
const [country, setCountry] = useState("");
const options = useMemo(() => countryList().getData(), []);
return (
<form className="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<div className="sm:col-span-4">
<label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
Country
</label>
<div className="mt-2">
<Select
id="country"
name="country"
options={options}
value={country}
onChange={(selectedOption) => setCountry(selectedOption.value)}
autoComplete="country-name"
className="block w-full py-1.5 text-gray-900 shadow-sm focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs "
/>
</div>
</div>
</form>
);
}
当我选择一个国家/地区时,国家/地区选择 onChange 抛出以下错误:
undefined 不是一个对象(评估 'a.props.inputProps.ref')
我记录了 selectedOption,结果显示为 {label:"United States",value:"US}
问题可能是什么以及如何解决?
您看到的错误(undefined is not an object (evaluating 'a.props.inputProps.ref'))表明 Select 组件期望提供一些 props,或者与 useState 一起使用时在内部管理 ref 时遇到问题对于国家。
在这种情况下,问题可能源于如何设置值。当您设置 value={country} 时,您直接为其分配了一个字符串,这不是react-select 对 value prop 的期望。相反,react-select 需要一个包含 label 和 value 属性的对象。
解决方案 要解决此问题,您可以将整个 selectedOption 对象存储在您的状态中,而不仅仅是值:
更新 useState 中的国家/地区以存储选定的选项对象。 修改 onChange 处理程序以设置整个选项。 确保 value 是选定的对象,而不仅仅是 value 属性。 您的代码应如下所示:
"use client";
import { useState, useMemo } from "react";
import Header from "@/components/Header";
import PhoneInput from "@/components/PhoneInput";
import countryList from "react-select-country-list";
import Select from "react-select";
export default function Dashboard() {
const [country, setCountry] = useState(null);
const options = useMemo(() => countryList().getData(), []);
return (
<form className="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl
md:col-span-2">
<div className="sm:col-span-4">
<label
htmlFor="country"
className="block text-sm font-medium leading-6 text-gray-900"
>
Country
</label>
<div className="mt-2">
<Select
id="country"
name="country"
options={options}
value={country}
onChange={(selectedOption) => setCountry(selectedOption)}
autoComplete="country-name"
className="block w-full py-1.5 text-gray-900 shadow-sm focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs"
/>
</div>
</div>
</form>
);
}