Reactjs 在React Typescript中实现自动完成组件

我是新手。我想在我的项目中使用react-typescript创建自动完成文本框。我在谷歌上搜索得到了一些示例代码。我尝试在我的应用程序中使用。我犯了一些错误

在我的Autocomplete.tsx中，我得到了一些错误，我将在下面解释我的错误，当我在index.tsx中绑定Autocomplete组件时，我得到了数据中的错误

自动完成.tsx

import react, { ChangeEvent, FC, useState } from "react";
import styled from "styled-components";
import { FaArrowDown } from "@react-icons/all-files/fa/FaArrowDown";

import {
    AutoCompleteContainer,
    AutoCompleteIcon,
    Input,
    AutoCompleteItem,
    AutoCompleteItemButton
} from "./styles";
const Root = styled.div`
    position: relative;
    width: 320px;
`;

interface IData {
    name: string;
    code: string;
}
interface autoCompleteProps {
    iconColor?: string;
    inputStyle?: react.CSSProperties;
    optionsStyle?: react.CSSProperties;

    data: any[];
}
export const AutoComplete: FC<autoCompleteProps> = ({
    iconColor,
    inputStyle,
    optionsStyle,
    data
}) => {
    const [search, setSearch] = useState({
    text: "",
    suggestions: []
    });
    const [isComponentVisible, setIsComponentVisible] = useState(true);
    const onTextChanged = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    let suggestions = [];
    if (value.length > 0) {
        const regex = new RegExp(`^${value}`, "i");
        suggestions = data.sort().filter((v: IData) => regex.test(v.name));
    }
    setIsComponentVisible(true);
    setSearch({ suggestions, text: value });
    };

    const suggestionSelected = (value: IData) => {
    setIsComponentVisible(false);

    setSearch({
        text: value.name,
        suggestions: []
    });
    };

    const { suggestions } = search;

    return (
    <Root>
        <div
        onClick={() => setIsComponentVisible(false)}
        style={{
            display: isComponentVisible ? "block" : "none",
            width: "200vw",
            height: "200vh",
            backgroundColor: "transparent",
            position: "fixed",
            zIndex: 0,
            top: 0,
            left: 0
        }}
        />
        <div>
        <Input
            id="input"
            autoComplete="off"
            value={search.text}
            onChange={onTextChanged}
            type={"text"}
            style={inputStyle}
        />
        <AutoCompleteIcon color={iconColor} isOpen={isComponentVisible}>
            <FaArrowDown />
        </AutoCompleteIcon>
        </div>
        {suggestions.length > 0 && isComponentVisible && (
        <AutoCompleteContainer style={optionsStyle}>
            {suggestions.map((item: IData) => (
            <AutoCompleteItem key={item.code}>
                <AutoCompleteItemButton
                key={item.code}
                onClick={() => suggestionSelected(item)}
                >
                {item.name}
                </AutoCompleteItemButton>
            </AutoCompleteItem>
            ))}
        </AutoCompleteContainer>
        )}
    </Root>
    );
};

在index.ts文件中，我绑定data={data}值时出错 （JSX属性）autoCompleteProps.data:any[]

Autocomplete.tsx文件（如何解决问题）

建议行内错误：（属性）建议：从不[]

Type 'any[]' is not assignable to type 'never[]'.
    Type 'any' is not assignable to type 'never'.ts(2322

---

我建议你试着改变这个

interface autoCompleteProps {
    iconColor?: string;
    inputStyle?: react.CSSProperties;
    optionsStyle?: react.CSSProperties;

    data: IData[];
}

还有这个

const [search, setSearch] = useState({
    text: "",
    suggestions: [] as IData[]
    });

还有这个

let suggestions : IData[] = [];

Type 'any[]' is not assignable to type 'never[]'.
    Type 'any' is not assignable to type 'never'.ts(2322

interface autoCompleteProps {
    iconColor?: string;
    inputStyle?: react.CSSProperties;
    optionsStyle?: react.CSSProperties;

    data: IData[];
}

const [search, setSearch] = useState({
    text: "",
    suggestions: [] as IData[]
    });

let suggestions : IData[] = [];