未捕獲的類型錯誤：使用 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
  }
}