由于 TypeError，React 页面未加载：无法读取 null 的属性“地图”

Posted 2023-02-22

【中文标题】由于 TypeError，React 页面未加载：无法读取 null 的属性“地图”

【英文标题】：React page not loading due to TypeError: Cannot read property 'map' of null

【发布时间】：2019-06-21 16:45:23

【问题描述】：

import React from 'react';

import  Link  from "react-router-dom";

const Recipes = props => (
    <div className="container">
        <div className="row">
            props.recipes.map((recipe) => 
                return (
                    <div key=recipe.title className="col-md-4" style= marginBottom: "2rem" >
                        <div className="recipes__box">
                            <img
                                className="recipe__box-img"
                                src=recipe.image_url
                                alt=recipe.title />
                            <div className="recipe__text">
                                <h5 className="recipes__title">
                                    recipe.title.length < 20 ? `$recipe.title` : `$recipe.title.substring(0, 25)...`
                                </h5>
                                <p className="recipes__subtitle">Publisher: <span>
                                    recipe.publisher
                                </span></p>
                            </div>
                            <button className="recipe_buttons">
                                <Link to=
                                    pathname: `/recipe/$recipe.recipe_id`,
                                    state:  recipe: recipe.title 
                                >View Recipe</Link>
                            </button>
                        </div>
                    </div>
                );
            )
        </div>
    </div>
);

export default Recipes;

谁能告诉我为什么我的 .map() 函数会导致这个错误？这是我正在尝试遵循的教程（构建配方反应项目） 这是源代码： https://github.com/hamza-mirza/react-recipe-app/blob/master/src/components/Recipe.js

我的和下面的一样，但是我得到了 TypeError。

【问题讨论】：

在第一次渲染时，您的 recipes 属性似乎为空。尝试在您的代码中添加(props.recipes || []).map 并查看错误是否消失

哇，这解决了它。非常感谢！

移动它回答然后

【参考方案1】：

看起来您的 recipes 属性在第一次渲染时为空。 也许您正在传递以异步方式填充的内容，并且在第一次渲染时还没有。

尝试添加你的代码：

(props.recipes || []).map

为了进行安全检查，如果 prop recipes 在第一次渲染时为 null 或 undefined，则使用空数组

【参考方案2】：

您的食谱道具为空。检查您传递给组件的内容。

【讨论】：

这不是答案，也不是专门的解决方案。这应该是一个评论。你也有评论的声誉

"谁能告诉我为什么我的 .map() 函数会导致这个错误？" - 这是该问题的直接答案。

如果你这么认为，他在标题中的错误：TypeError: Cannot read property 'map' of null 已经是解决方案了