[英]React: How to solve: Property 'children' does not exist on type 'IntrinsicAttributes & Props'
I'm trying fetch data from an API and display the data into list of cards in React with typeScript. Since I am new with React in Typescript, not sure how I can solve this error or am I missing something.我正在尝试从 API 中获取数据,并使用 typeScript 将数据显示到 React 中的卡片列表中。由于我是 Typescript 中的 React 新手,所以不确定如何解决此错误或者我是否遗漏了什么。
This is the error I get: Type '{ children: string[];这是我得到的错误: Type '{ children: string[]; key: number;
键:数字; }' is not assignable to type 'IntrinsicAttributes & Props'.
}' 不可分配给类型 'IntrinsicAttributes & Props'。 Property 'children' does not exist on type 'IntrinsicAttributes & Props'.
类型“IntrinsicAttributes & Props”上不存在属性“children”。
This is the code:这是代码:
interface Props {
pokemonItem: PokemonItem;
}
export const PokemonCardList = (props: Props) => {
const { pokemonItem } = props;
const {
id = '',
name = '',
weight = '',
height = '',
abilities = '',
} = pokemonItem;
const [pokemon, setPokemon] = React.useState<PokemonItem[]>([]);
const [loadItems, setLoadItems] = React.useState(API_URL);
const getPokemons = async () => {
setLoading(true);
const response: any = await fetch(loadItems);
const data = await response.json();
setLoadItems(data.next);
setPokemon(data.results[0].name);
setLoading(false);
const getEachPokemon = (result: any) => {
result.forEach(async (element: any) => {
const response = await fetch(
`https:pokeapi.co/api/v2/pokemon/${element.id}`
);
const data = await response.json();
// // setPokemon((currentArrayList) => [...currentArrayList, data]);
pokemon.push(data);
});
};
getEachPokemon(data.results);
await console.log(pokemon);
};
React.useEffect(() => {
return getPokemons();
}, []);
return (
<div>
{pokemon &&
pokemon.map((item, index) => (
<PokemonCard key={index}>
{item.name} {item.height} {item.weight} {item.abilities}
</PokemonCard>
))}
</div>
);
};
Thie pokemonCard component: Thie pokemonCard 组件:
interface Props {
pokemonItem: PokemonItem;
}
const PokemonCard = (props: Props) => {
const { pokemonItem } = props;
const {
id = '',
name = '',
weight = '',
height = '',
abilities = '',
} = pokemonItem;
const [imageLoaded, setImageLoaded] = React.useState(false);
const urlImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png?raw=true`;
return (
<div imageLoaded={imageLoaded}>
<div
src={urlImage}
onLoad={() => setImageLoaded(true)}
/>
<div>
Name: {name}
Height: {height}
Weight: {weight}
Abilities: {abilities}
</div>
</div>
);
};
According to your definition of the PokemonCard
component, you should be passing the pokemonItem
as follow:根据您对
PokemonCard
组件的定义,您应该按如下方式传递pokemonItem
:
<PokemonCard pokemonItem={item} key={item.id} />
I have replaced the key
prop as it is not recommended to use indexes as keys (see documentation ), you could use the item's id instead.我已经替换了
key
prop,因为不建议将索引用作键(请参阅文档),您可以使用项目的 id 代替。 And you need to update the prop interface for the PokemonCard
component so that the additional key
prop doesn't break the validation:并且您需要更新
PokemonCard
组件的 prop 接口,以便额外的key
prop 不会破坏验证:
interface Props {
pokemonItem: PokemonItem;
key: string;
}
试试这个(为你的组件添加类型):
export const PokemonCardList: React.FC<Props> = (props) => {}
Use PropsWithChildren
from react
:使用来自
react
的PropsWithChildren
:
import React, {Component, PropsWithChildren} from "react";
interface OwnProps {
foo?: BarComponent;
}
// For class component
class MyComponent extend Component<PropsWithChildren<OwnProps>> {
...
}
// For FC
const MyFunctionComponent: FC<PropsWithChildren<Props>> = ({
children,
}) => (...)
import React from "react";
import Paper, { PaperProps } from "@material-ui/core/Paper";
interface TableEmployeeProps extends PaperProps {
// your props
}
const TableEmployee: React.FC<TableEmployeeProps> = (props) => {
return (
<Paper {...props}> </Paper>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.