Javascript TypeError:无法读取属性'；地图'；在我的应用程序中未定义的

每次我试图映射一个数组时都会出现这个错误

这是配料表

ingredients": [
  "2 jalapeno peppers, cut in half lengthwise and seeded",
  "2 slices sour dough 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\n"
],

这是我的密码

renderRecipe(){
    const {recipe}= this.props;
    const recipeTitle = recipe.title;
    const publisher = recipe.publisher;
    const ingredients = recipe.ingredients.map((ingredient) => {
        console.log(ingredient);
        return <li key={recipeId}> {ingredient} </li>     
    })

    const recipeId = recipe.recipe_id;
    const recipeImage = recipe.image_url;

    return (
        <div>
            <p>{recipeId}</p>
            <img src={recipeImage} />

           <ul>
               {ingredients}
           </ul>


        </div>
    )

}render() {

return (
  <div>
      {this.renderRecipe()}

  </div>
)}}const mapStateToProps= state => ({
recipe: state.recipe.recipe})export default connect (mapStateToProps)(Recipe)

renderRecipe（）{
const{recipe}=this.props；
const recipeTitle=recipe.title；
const publisher=recipe.publisher；
常量配料=配方.配料.映射（（配料）=>{
控制台日志（成分）；
return
{component}
})
const recipeId=recipe.recipe\u id；
const recipeImage=recipe.image\u url；
返回(
{recipeId}


{成分}

)
}render（）{
返回(
{this.renderRecipe（）}
)}}常量mapStateToProps=状态=>({
配方：state.recipe.recipe}）导出默认连接（mapStateToProps）（配方）

我得到了这个错误（TypeError:无法读取未定义的属性“map”） 如果没有地图，应用程序也可以正常运行

请帮忙，

---

谢谢，各位

很可能在第一次渲染时，您的配方还没有填满。React属性有时会晚一些到达，并且在填充道具之前会运行几次渲染

进行额外的检查，以确保您拥有所需的数据。如果不是，则始终可以返回null或仅显示加载范围。在绘制成分图之前进行此操作

if (!this.props.recipe || !this.props.recipe.ingredients || this.props.recipe.ingredients.length === 0) {
    return null;
}

您还可以使用proptypes.defaultProps来避免这样的检查

在长期解决方案中，我还建议创建一个单独的util文件，其功能如下：

export function getVariable(contentObj, name, defaultReturn) {
    const nameChain = name.split('.');
    const resultVariable = nameChain.reduce((levelResultObj, nameElement) => {
        return levelResultObj && levelResultObj.hasOwnProperty(nameElement)
            ? levelResultObj[nameElement]
            : undefined; // eslint-disable-line no-undefined
    }, contentObj);
    return (resultVariable !== undefined) ? resultVariable : defaultReturn;
}

使用此功能，您可以从“深度对象”获取数据，而无需逐个检查每个级别。如果任何级别失败，可以将返回值作为第三个参数。像这样的

ObjectUtil.getVariable(this, 'props.recipe.ingredients', []);

---

即使未定义任何级别，也将返回空数组。然后，您可以调用map，无需担心，或者检查其长度，或者渲染结果，它将不包含任何内容。

在第一次渲染中，很可能您尚未填充配方。配料。React属性有时会晚一些到达，并且在填充道具之前会运行几次渲染

进行额外的检查，以确保您拥有所需的数据。如果不是，则始终可以返回null或仅显示加载范围。在绘制成分图之前进行此操作

if (!this.props.recipe || !this.props.recipe.ingredients || this.props.recipe.ingredients.length === 0) {
    return null;
}

您还可以使用proptypes.defaultProps来避免这样的检查

在长期解决方案中，我还建议创建一个单独的util文件，其功能如下：

export function getVariable(contentObj, name, defaultReturn) {
    const nameChain = name.split('.');
    const resultVariable = nameChain.reduce((levelResultObj, nameElement) => {
        return levelResultObj && levelResultObj.hasOwnProperty(nameElement)
            ? levelResultObj[nameElement]
            : undefined; // eslint-disable-line no-undefined
    }, contentObj);
    return (resultVariable !== undefined) ? resultVariable : defaultReturn;
}

使用此功能，您可以从“深度对象”获取数据，而无需逐个检查每个级别。如果任何级别失败，可以将返回值作为第三个参数。像这样的

ObjectUtil.getVariable(this, 'props.recipe.ingredients', []);

---

即使未定义任何级别，也将返回空数组。然后，您可以无需担心地调用map，或者检查它的长度，或者渲染结果，它将不包含任何内容。

原因有很多。 起初，

这个.props.components

没有定义。 因此，要检查

this.props.components

的有效性，请您自己这样做

ObjectUtil.getVariable(this, 'props.recipe.ingredients', []);

const{recipe}=this.props；
控制台。日志（配方。配料）；

然后，您可以通过添加

if语句

例如

let配料；
if（recipe.components！==未定义和&ricipe.components.length>0）
{
配料=配方.配料.映射（（配料）=>{
控制台日志（成分）；
return
{component}
})
}
其他的
成分=空；

原因有很多种。 起初，

这个.props.components

没有定义。 因此，要检查

this.props.components

的有效性，请您自己这样做

ObjectUtil.getVariable(this, 'props.recipe.ingredients', []);

const{recipe}=this.props；
控制台。日志（配方。配料）；

然后，您可以通过添加

if语句

例如

let配料；
if（recipe.components！==未定义和&ricipe.components.length>0）
{
配料=配方.配料.映射（（配料）=>{
控制台日志（成分）；
return
{component}
})
}
其他的
成分=空；

完全有可能配方对象中最初没有可用的成分。您是否可以尝试在其中添加条件渲染？完全可能的是，配方对象中最初没有可用的成分。你能尝试在那里添加一个条件渲染吗