反应：TypeError：无法读取未定义的属性（读取“地图”）答案

【问题标题】：React: TypeError: Cannot read properties of undefined (reading 'map')反应：TypeError：无法读取未定义的属性（读取“地图”）
【发布时间】：2021-12-02 05:14:46
【问题描述】：

我是 React 的新手。我正在通过 API 获取宠物小精灵。基本上，当我单击其中一个时，我想做那个口袋妖怪的细节。但是，我在标题中遇到了这个错误。我知道我的 PokemonDetail.js 文件有问题。但我无法从 app.js 获取信息到 pokemonDetail.js 文件。我怎样才能做到这一点？感谢您的宝贵时间。

另外，我不擅长英语，所以这是我的项目。 https://github.com/yasoyase/PokemonExercise

这是我的 App.js

const [pokemons, setPokemons] = useState([]);


const getPokemonRequest = async () => {
    const url = `https://pokeapi.co/api/v2/pokemon?offset=5&limit=5`;

    const response = await fetch(url);
    const fivePokemons = await response.json();
    
    fivePokemons.results.forEach( async (pokemon) => {
        const response = await fetch (pokemon.url);
        const pokemonSpecs = await response.json();
        
        setPokemons(currentPokemons => [...currentPokemons, pokemonSpecs])
    })
};

useEffect(() => {
    getPokemonRequest();
}, []);
    return (
    <div className="main-bg">
        <div className='container'> 
                    <div className='row'>
                    
                        <PokemonList
                            pokemons={pokemons}
                            handleFavouritesClick={addFavouritePokemon}
                            favouriteComponent={AddFavourites}
                        />
                         <Route path="/pokemon/:id" component={PokemonDetail} />

                    </div>                      
            </div>
        </div>
    </div>
    
);

};

这是我的 Pokemonlist.js。我从那里得到了 App.js 的名称和 ID。

const PokemonList = (props) => {
const FavouriteComponent = props.favouriteComponent;

return (
    <> 
        {props.pokemons.map((pokemon, index) => (
            <div className="col-md-3 col-sm-6 my-5">
                <StyledLink to={`pokemon/${pokemon.id}`}>
                    <Card>
                        <div className="card-outer">
                        <h5 className="card-header">{pokemon.id}</h5> 
                        <h5 className="card">{pokemon.name}</h5> 
                        </div>
                    </Card> 
                </StyledLink>
            </div>
        ))}
    </>
);

};

导出默认 PokemonList；

正如你所看到的，当我点击 pokemon 时，它的 url 类似于：localhost/pokemon/5 例如。但是，它没有显示有关该 ID 的更多信息。这是我的 PokemonDetail.js 文件。

function PokemonDetail(props) {
const FavouriteComponent = props.favouriteComponent;
const pokemons = props.pokemons;

return (

<div className="col-md-3 my-5">
    {props.pokemons.map((pokemon, index) => (
        <div className="card-outer w-100 p-2 rounded text-center">
            <h5 className="card-header">{pokemon.abilities}</h5> 
            <img src={pokemon.sprites.other.dream_world.front_default} alt="pokemon-img"/>
                            
        </div>
    ))}                         
</div>
                
            
);

};

【问题讨论】：

标签： javascript reactjs react-native api react-redux

【解决方案1】：

.forEach 不支持异步函数 :)

试试for await of instead

【讨论】：

我不知道如何使用它我有点困惑。另外通过写我可以获得该口袋妖怪的相关图像。它工作正常
没关系，花点时间阅读文档和研究一些例子，自己做一些，我向你保证，你永远不会忘记它是如何工作的 :) 这很难，但如果你想成为一名开发人员，你永远不会逃避阅读文档并尝试直到它起作用:)你已经知道该使用什么，相信我这是一个巨大的开始:D
是的，我知道，我完全同意你的看法。老实说，我已经挣扎了好几天，没有太多时间提交我的作品。谢谢你的建议，如果你能帮助我，我会很高兴:) @majkels