Javascript 将对象数组映射到React元素时，其中一个属性将消失

我正在尝试制作一个React应用程序，从pokemonapi（）获取数据并将其显示在网格中

我的组件树：

应用程序->Pokedex->n（PokeCard->PokeAvatar）

在App组件中，我获取pokemon数据，获得20个第一个结果，并将结果数组映射到每个pokemon的URL也被获取的数组（数组中的每个对象都有“name”、“URL”和“info”属性）。info属性保存每个单独获取的所有数据

将此数组作为道具呈现Pokedex之后，在Pokedex组件中，我将数组映射到一个元素数组，其中只包含我要显示的数据（名称和“info”属性中的一些属性）

以下是引发错误的代码：

导出类Pokedex扩展React.Component{
render（）{
log（“this.props.pokerray:，this.props.pokerray）；//显示具有3个属性的口袋妖怪
const elements=this.props.pokerray.map（（口袋妖怪，i）=>{
console.log（pokemon）；//记录没有info属性的pokemon
返回(
);
});
返回(
Pokedex
{elements}
);
}
}

下面是来自其父元素App的代码：

导入“/App.css”； 从“/components/Pokedex/Pokedex”导入{Pokedex}”； 从“react query”导入{useQuery}； 从“react query devtools”导入{ReactQueryDevtools}； //***基本API url 常量url=”https://pokeapi.co/api/v2/pokemon"; //***异步，因为我们需要在第二次提取之前获取数据 异步函数fetchPokemon（）{ const response=等待获取（url）； const data=（wait response.json（））.results； //***保留获取的url，并向每个口袋妖怪添加新的信息属性 data.forEach（异步（poke）=>{ const res=等待获取（poke.url）； poke.info=await res.json（）； }); 返回数据； } 函数App（）{ const info=useQuery（“fetchPokemon”，fetchPokemon）； 如果（信息状态==“成功”）{ console.log（“pokerray:，info.data）；//每个口袋妖怪都有三个属性 返回( ; ); }否则返回null； } 导出默认应用程序；

---

我不知道我是否遗漏了什么，但我不明白为什么它不显示“info”属性。

看起来您正在执行异步

forEach

而不是等待它。您可能希望更改为

map

，并执行

const data=wait Promise.all（data.map（…）

，以确保数据已加载

我整理了一份工作。请查看：

import React from "react";
import { useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";

export class Pokedex extends React.Component {
  render() {
    console.log("this.props.pokeArray:", this.props.pokeArray); // shows pokemons with the 3 properties
    const elements = this.props.pokeArray.map((pokemon, i) => {
      console.log("POKEMON", pokemon); // logs the pokemon without the info property
      return (
        <React.Fragment key={i}>
          <div>key={`poke${i}`}</div>
          <div>id={pokemon.info.id}</div>
          <div>name={pokemon.name}</div>
          <div>sprite={pokemon.info.sprites["front_default"]}</div>
        </React.Fragment>
      );
    });

    return (
      <div className="pkdx-pokedex-container">
        <h1>Pokedex</h1>
        {elements}
      </div>
    );
  }
}

// *** Base API url

const url = "https://pokeapi.co/api/v2/pokemon";

// *** Async, because we need to have the data before second fetch

async function fetchPokemon() {
  const response = await fetch(url);

  const data = (await response.json()).results;

  // *** Keep url of fetch and add new info property to each pokemon

  const x = await Promise.all(
    data.map(async (poke) => {
      const res = await fetch(poke.url);
      return {
        ...poke,
        info: await res.json()
      };
    })
  );

  return x;
}

function App() {
  const info = useQuery("fetchPokemon", fetchPokemon);

  if (info.status === "success") {
    console.log("pokeArray:", info.data); // each Pokemon has the three properties
    return (
      <div>
        <Pokedex pokeArray={info.data} />;
        <ReactQueryDevtools />
      </div>
    );
  } else return null;
}

export default App;

从“React”导入React；
从“react query”导入{useQuery}；
从“react query devtools”导入{ReactQueryDevtools}；
导出类Pokedex扩展React.Component{
render（）{
log（“this.props.pokerray:，this.props.pokerray）；//显示具有3个属性的口袋妖怪
const elements=this.props.pokerray.map（（口袋妖怪，i）=>{
log（“POKEMON”，POKEMON）；//记录没有info属性的POKEMON
返回(
key={`poke${i}`}
id={pokemon.info.id}
name={pokemon.name}
精灵={pokemon.info.sprites[“front_default”]}
);
});
返回(
Pokedex
{elements}
);
}
}
//***基本API url
常量url=”https://pokeapi.co/api/v2/pokemon";
//***异步，因为我们需要在第二次提取之前获取数据
异步函数fetchPokemon（）{
const response=等待获取（url）；
const data=（wait response.json（））.results；
//***保留获取的url，并向每个口袋妖怪添加新的信息属性
const x=等待承诺(
data.map（异步（poke）=>{
const res=等待获取（poke.url）；
返回{
…戳，
信息：wait res.json（）
};
})
);
返回x；
}
函数App（）{
const info=useQuery（“fetchPokemon”，fetchPokemon）；
如果（信息状态==“成功”）{
console.log（“pokerray:，info.data）；//每个口袋妖怪都有三个属性
返回(
;
);
}否则返回null；
}
导出默认应用程序；

看起来您正在为每个人执行异步

而不是等待它。您可能希望更改为
map
，并执行
const data=wait Promise.all（data.map（…）
，以确保数据已加载

我整理了一份工作。请查看：

import React from "react";
import { useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";

export class Pokedex extends React.Component {
  render() {
    console.log("this.props.pokeArray:", this.props.pokeArray); // shows pokemons with the 3 properties
    const elements = this.props.pokeArray.map((pokemon, i) => {
      console.log("POKEMON", pokemon); // logs the pokemon without the info property
      return (
        <React.Fragment key={i}>
          <div>key={`poke${i}`}</div>
          <div>id={pokemon.info.id}</div>
          <div>name={pokemon.name}</div>
          <div>sprite={pokemon.info.sprites["front_default"]}</div>
        </React.Fragment>
      );
    });

    return (
      <div className="pkdx-pokedex-container">
        <h1>Pokedex</h1>
        {elements}
      </div>
    );
  }
}

// *** Base API url

const url = "https://pokeapi.co/api/v2/pokemon";

// *** Async, because we need to have the data before second fetch

async function fetchPokemon() {
  const response = await fetch(url);

  const data = (await response.json()).results;

  // *** Keep url of fetch and add new info property to each pokemon

  const x = await Promise.all(
    data.map(async (poke) => {
      const res = await fetch(poke.url);
      return {
        ...poke,
        info: await res.json()
      };
    })
  );

  return x;
}

function App() {
  const info = useQuery("fetchPokemon", fetchPokemon);

  if (info.status === "success") {
    console.log("pokeArray:", info.data); // each Pokemon has the three properties
    return (
      <div>
        <Pokedex pokeArray={info.data} />;
        <ReactQueryDevtools />
      </div>
    );
  } else return null;
}

export default App;

从“React”导入React；
从“react query”导入{useQuery}；
从“react query devtools”导入{ReactQueryDevtools}；
导出类Pokedex扩展React.Component{
render（）{
log（“this.props.pokerray:，this.props.pokerray）；//显示具有3个属性的口袋妖怪
const elements=this.props.pokerray.map（（口袋妖怪，i）=>{
log（“POKEMON”，POKEMON）；//记录没有info属性的POKEMON
返回(
key={`poke${i}`}
id={pokemon.info.id}
name={pokemon.name}
精灵={pokemon.info.sprites[“front_default”]}
);
});
返回(
Pokedex
{elements}
);
}
}
//***基本API url
常量url=”https://pokeapi.co/api/v2/pokemon";
//***异步，因为我们需要在第二次提取之前获取数据
异步函数fetchPokemon（）{
const response=等待获取（url）；
const data=（wait response.json（））.results；
//***保留获取的url，并向每个口袋妖怪添加新的信息属性
const x=等待承诺(
data.map（异步（poke）=>{
const res=等待获取（poke.url）；
返回{
…戳，
信息：wait res.json（）
};
})
);
返回x；
}
函数App（）{
const info=useQuery（“fetchPokemon”，fetchPokemon）；
如果（信息状态==“成功”）{
console.log（“pokerray:，info.data）；//每个口袋妖怪都有三个属性
返回(
;
);
}否则返回null；
}
导出默认应用程序；
这里的问题在于