我在我的 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>
)
}
uj5u.com熱心網友回復：
- 您沒有在
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"}
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/490047.html