React 如何调用 API 并在对象数组中显示数组 PokeAPI答案

【问题标题】：React how to make a call to an API and display an array in an array of objects PokeAPIReact 如何调用 API 并在对象数组中显示数组 PokeAPI
【发布时间】：2022-01-17 18:30:47
【问题描述】：

我需要帮助我正在处理的项目，我希望能够显示我输入的口袋妖怪的移动，我可以控制台记录一个包含较小数组的对象数组，我想抓取并显示，我该怎么做？我尝试了方法 getPokemonNames 的集群，该方法应该获取 pokemon 移动的名称，但这是我无法再思考的地方。

import React, {useState} from 'react';
import PokemonName from './PokemonName';
import axios from 'axios';


function App() {
  const [pokemon, setPokemon] = useState([])
  const [loading, setLoading] = useState(false)
  const [moves, setMoves] = useState([])
  
  const getPokemon = async (name) =>{
    setLoading(true);
    const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`)
    const data = response.data;
    setPokemon(data);
    setMoves(data.moves);
    setLoading(false);
    console.log(data)
    getPokemonNames(data.moves)
    
   // const pokemonMovesAmount = pokemon.moves.map
  }
  const getPokemonNames = (data) =>{
    console.log(data);
    data.move.name.map((moves, key)=>(
      <div key={key}>
        <span>{moves.moves.name}</span>
      </div>
    ))
    
  }
  
  return (
    <>
    <PokemonName getPokemon={getPokemon}/>
    <div>
      {!loading && pokemon ? (<div> 
      </div>): null}
      <img src={pokemon.sprites?.front_default}/>
      <div className="container">
        {getPokemonNames}
      </div>
    </div>
    </>
  );
}

export default App;

这是口袋妖怪名称组件

import React, {useState} from 'react'
const onSubmit =(e) =>{
    e.preventDefault();
}
export default function PokemonName(props) {
    const [search, setSearch] = useState('');
   
    return (
        
        <div>
            <div> 
                <h1>{search}</h1>
                <form onSubmit={onSubmit}>
                <input onChange={e => setSearch(e.target.value)} type ="text" placeholder="Search for Pokemon"></input>
                <button onClick={(e) => props.getPokemon(search)}>Search</button>
                </form >
            </div>
        </div>
    )
}

编辑，这显示了我在搜索 pokemon mew 后得到的数据的更多信息

【问题讨论】：

很高兴看到您返回的数据类型能够为您提供更多帮助
希望有帮助，我也将其范围缩小到仅移动对象数组
正确让我们一步一步来，你的函数 getPokemonNames 需要一个参数数据，如果你注意到当你调用函数时你没有传递任何东西给它，第一步是传递你之前存储的数据您的状态变量，如果您想查看变量中有哪些数据，只需 console.log 它以确保它是您所期望的
你的意思是返回里面的函数吗？，我试着给它移动状态变量，但我似乎只是得到空数组

标签： javascript reactjs object web pokeapi

【解决方案1】：

第一步，确保传递参数数据

const [moves, setMoves] = useState([])
// since you set setMoves to be data.moves second step you can iterate over data only
return (
<>
<PokemonName getPokemon={getPokemon}/>
<div>
  {!loading && pokemon ? (<div> 
  </div>): null}
  <img src={pokemon.sprites?.front_default}/>
  <div className="container">
    {getPokemonNames(moves)}
  </div>
</div>
</>
);

第二步，调整你的 getPokemon 方法

const getPokemonNames = (data) => {
return data.map(moveD, key)=>(
  <div key={key}>
    <span>{moveD.move.name}</span>
  </div>
))
}

【讨论】：

TypeError: Cannot read properties of undefined (reading 'map')，我是不是用 map 函数做错了什么？
我刚刚编辑了答案，你的状态变量已经存储了 data.moves 所以如果你返回 data.map 应该足够了
天哪，你太棒了，我无法告诉你这困扰了我多久，大概是 12 -15 小时，但它终于奏效了，非常感谢
没问题，忠告，利用控制台日志和调试器，这样您就可以确切地知道您传递的数据等等。

【解决方案2】：

您的 getPokemonNames 中有一个错误。您正在尝试执行 data.move.name.map ，这意味着您正在从“数据”内部映射“移动”。您需要映射“移动”数组。这是你可以做到的。

const getPokemonNames = (data) =>{
    data.moves.map(item, key)=>(
      <div key={key}>
        <span>{item.move.name}</span>
      </div>
    ))
}

【讨论】：