我在我的 React Typescript 应用程序中收到此错误。具体来说，尝试将道具传递给子组件时会发生错误。
这是父组件：
const SearchID: FC = (): ReactElement => {
const { id } = useParams<string>();
const {
data: cocktails,
isLoading,
error
} = useGetCocktailByIDQuery(id ? id : "");
if(isLoading) return <Skeleton variant="text" />
if(error) return <div>An error has occured.</div>
return (
<>
{cocktails ? <CocktailDetail props={cocktails.drinks[0]} /> : "No data"}
</>
);
};
我能够让 console.log(props) 显示在控制台中，但仍然收到 Typescript 错误。子组件：
const CocktailDetail = (props: IDrink) => {
console.log(props)
return (
<h1></h1>
)
}
CocktailDetail组件中显式指定类型，因此 TypeScript 发现很难知道哪些 props 应该存在和不应该存在。我倾向于做的是这样的：
interface IDrink {
id: string;
name: string;
}
interface CocktailDetailProps {
drink: IDrink;
}
const CocktailDetail: FC<CocktailDetailProps> = ({ drink }) => {
return (<h1></h1>);
}
然后使用如下：
const SearchID: FC = (): ReactElement => {
const { id } = useParams<string>();
const {
data: cocktails,
isLoading,
error
} = useGetCocktailByIDQuery(id ? id : "");
if(isLoading) return <Skeleton variant="text" />
if(error) return <div>An error has occured.</div>
return (
<>
{cocktails ? <CocktailDetail drink={cocktails.drinks[0]} /> : "No data"}
</>
);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句