未捕获的类型错误：使用 Rcipe API 时无法读取未定义的属性“映射”

Question

我在映射成分时遇到了这个问题。

const {
  image_url,
  publisher,
  publisher_url,
  source_url,
  title,
  ingredients
} = this.state.recipe;
{
  ingredients.map((item, index) => {
    return (
      <li key={index} className="list-group-item text-slanted">
        {item}{" "}
      </li>
    );
  });
}

我在销毁后对记录的成分进行了安慰，以检查我是否有数据并且我收到了这个数组。

[
  "2 jalapeno peppers, cut in half lengthwise and seeded",
  "2 slices sourdough bread",
  "1 tablespoon butter, room temperature",
  "2 tablespoons cream cheese, room temperature",
  "1/2 cup jack and cheddar cheese, shredded",
  "1 tablespoon tortilla chips, crumbled"
];

我试图将成分包装在这样的数组中。[成分]它正在工作，但没有循环。 它只是将整个数组作为一个返回。 与此相关的答案都没有解决我的问题。

这是整个代码。

import React, { Component } from 'react'

从 'react-router-dom' 导入 {Link}

导出默认 class DishRecipe 扩展组件 {

constructor(props){
    super(props)
    this.state = {
        recipe: [],
        url: `API_URL=${
            this.props.match.params.recipe_id
        }`
    }
}

async componentDidMount(){
    try {
        const data = await fetch(this.state.url);
        // console.log(data);
        const jsonData = await data.json();
        this.setState({
            recipe: jsonData.recipe
        });
    } catch (error) {
        console.log(error);
    }
    // console.log(this.state.recipe);
}

render() {

    const {
        image_url, 
        publisher,
        publisher_url,
        source_url,
        title,
        ingredients
    } = this.state.recipe;

    return (
        <div>
            <div className="container">
                <div className="row">
                    <div className="col-10 mx-auto col-md-6 my-3">
                        <Link
                            to ="/"
                            className = "btn btn-warning mb-5 text-capitalize"
                        >
                            Back to recipe list
                        </Link>
                        <img 
                            src={image_url} 
                            className = "d-block w-100"
                            alt=""
                        />
                    </div>
                    {/* details */}
                    <div className="col-10 mx-auto col-md-6 my-3">
                        <h6 className = "text-uppercase">{title}</h6>
                        <h6 className="text-warning text-capitalize text-slanted">
                            provided by {publisher}
                        </h6>
                        <a 
                            href={publisher_url}
                            target = "_blank"
                            rel="noopener noreferrer"
                            className = "btn btn-primary mt-2 text-capitalize"
                        >Publisher webpage</a>
                        <a 
                            href={source_url}
                            target = "_blank"
                            rel="noopener noreferrer"
                            className = "btn btn-success mt-2 ml-2 text-capitalize"
                        >Source Page</a>
                        <ul className="list-group mt-4">
                            <h2 className="mt-3 mb-4">Ingredients</h2>
                            {
                                ingredients.map((item, index) =>{
                                    return(
                                        <li 
                                            key = {index}
                                            className="list-group-item text-slanted"
                                        >
                                            {item}
                                        </li>
                                    );
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}

}

Answer 1

尝试在 state 中将具有空数组的成分识别为初始值，如下所示：

state = {
    recipe: {
      ingredients: []
    }
}

Answer 2

进行条件渲染以确保ingredients是列表/存在于undefined的recipes中。

{
  ingredients && indegredients.map(...)
}

更新

ingredients在state中未正确初始化。

state = {
  recipe: {
    ingredients: [] // initialize properly
  }
}