选择 onChange 错误 - 未定义不是对象（评估 'a.props.inputProps.ref'）

Question

"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}

问题可能是什么以及如何解决？

Answer 1

您看到的错误（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>
  );
}