reactjs - typescript 错误 TS2322 : Type 'Option' is not assignable to type '(string & Option) | (number & Option) | (readonly string[] & Option)'

Question

我正在尝试加载一个简单的 Listbox组件来自 @headlessui/react .
选择.tsx

type Option = {
    id: number
    name: string
}

interface IProps {
    label?: string
    options: Array<Option>
}

export const Select = ({ label, options }: IProps) => {
    const [selectedOption, setSelectedOption] = React.useState<Option>(options[0])

    return (
        <Listbox value={selectedOption} onChange={setSelectedOption}>
            <Listbox.Label>{label}: </Listbox.Label>
            <Listbox.Button>{selectedOption.name}</Listbox.Button>
            <Listbox.Options>
                {options.map((option) => (
                    <Listbox.Option key={option.id} value={option}>
                        {option.name}
                    </Listbox.Option>
                ))}
            </Listbox.Options>
        </Listbox>
    )
}

我在 value 上收到此错误(红色波浪线)的 value={option} :

TS2322: Type 'Option' is not assignable to type '(string & Option) | (number & Option) | (readonly string[] & Option)'.Type 'Option' is not assignable to type 'readonly string[] & Option'.Type 'Option' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 16 more.

我什至尝试做 value={option.name}但是在我第一次选择它之后，select 元素就会从 DOM 中删除。
应用程序.tsx

const shapes = [
    {
        id: 1,
        name: 'Circle',
    },
    {
        id: 2,
        name: 'Square',
    },
]

<Select label="Shape" options={shapes} />

我该如何解决这个问题？

Answer 1

该错误在库本身中。
解决方法是使用@dev现在的版本喜欢 npm install @headlessui/react@dev希望它很快得到修复和发布，这样我们就不需要使用 @dev旗帜。