Question

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。

Answer 1

您的recipes道具在第一次渲染时似乎为空。也许您正在传递以异步方式填充的内容，并且第一个呈现尚不存在。

尝试添加您的代码：

(props.recipes || []).map

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

Answer 2

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

由于TypeError无法加载React页面：无法读取null的属性“ map”

2 个答案: