Question

我正在尝试使用React和TypeScript来构建一个简单的自动完成组件。该组件如下所示：

export function Autocomplete<TResult>({ onData, onRenderItem, defaultItem, ...inputProps }: IAutocompleteProps<TResult>) {
    // define the element which should be the selected one
    const [selectedItem, setSelectedItem] = React.useState<TResult>(defaultItem);

    // ...
}

传递的道具是：

export interface IAutocompleteProps<TResult> extends IInputProps {
    /**
     * Gets or sets the item which should be used as default selected item
     */
    defaultItem?: TResult;
}

我的问题是，当用户选择一个项目时，尝试设置所选项目（在回调内部）时出错：

setSelectedItem(currentActiveItem.item);

其中currentActiveItem.item的类型为TResult。 ts-compiler显示的错误是

“ TResult”类型的参数不能分配给“ SetStateAction”类型的参数。

我看不到我在做什么错。最好的猜测是，这与状态变量的类型是通用有关。

另一方面，我定义了一个状态变量

const [matchingData, setMatchingData] = React.useState<IResultItem<TResult>[]>(null);

工作正常，应该正常工作。

将代码更改为const [selectedItem, setSelectedItem] = React.useState<TResult[]>([defaultItem]);时，我可以使用setSelectedItem([currentActiveItem.item]);，而无需任何编译器投诉...

反应泛型类型的useState抛出错误

0 个答案: