当前位置: 首页 > 知识库问答 >
问题:

反应:如何解决:类型“IntrinsicAttributes”上不存在属性“children”

尉迟清野
2023-03-14

我正在尝试从API中获取数据并将数据显示到React with typeScript中的卡片列表中。由于我是Typescript中React的新手,不知道如何解决此错误,或者我是否遗漏了一些东西。

这是我得到的错误:类型“{儿童:字符串[];键:数字;}”不能分配给类型“Intrinsic属性”

这是代码:

    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>
  );
};

蒂耶口袋妖怪卡组件:

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>
  );
};

共有3个答案

翟昊明
2023-03-14

试试这个(为您的组件添加类型):

导出const PokemonCardList:React.FC

戚飞虎
2023-03-14

根据您对PokemonCard组件的定义,您应该按如下方式传递pokemonItem:

<PokemonCard pokemonItem={item} key={item.id} />

我已经替换了 prop,因为不建议使用索引作为键(请参阅文档),你可以改用项目的 ID。并且您需要更新口袋妖怪卡组件的 prop 接口,以便其他密钥 prop 不会破坏验证:

interface Props {
  pokemonItem: PokemonItem;
  key: string;
}

龙佐
2023-03-14

使用PropsWithKids反应

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,
}) => (...)
 类似资料:
  • 我正在尝试在reacttypescript项目中使用NavLink,但是,它收到一个错误。属性“activeStyle”在“IntrinsicAt⃣tes”类型上不存在

  • 问题内容: 我正在使用Typescript,React和Redux(都在Electron中运行)进行项目,当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时,我遇到了一个问题。宽松地说,容器组件具有以下结构: 和子组件: 显然,我只包括基础知识,这两个类还有很多其他内容,但是当我尝试运行有效的代码时,仍然遇到错误。我得到的确切错误: 当我第一次遇到该错误时,我以为是因为我没有传入定

  • 代码里一直提示, 项目技术栈:uniapp+vue3+ts+vite

  • 我使用的是完全修补过的Visual Studio 2013。我正在尝试使用JQuery、JQueryUI和JSRender。我也在尝试使用打字。在ts文件中,我得到如下错误: 类型“{}”上不存在属性“fade div”。

  • 我试图在登录过程后获得连接的用户模型, 首先,在CanActivate guard检查了带有用户JSON对象的本地存储并发现该对象为空之后,用户将重定向到“/login”URL 然后用户登录并重定向回根URL“/”,在连接过程中我使用AuthService,它将从服务器返回的用户对象保存在用户模型中 这是我的守卫:

  • 升级到Angular 6.0和Rxjs到6.0后,我收到以下编译错误: