問題渲染項目列表中反應

我想在屏幕上顯示的項目列表，但收到的錯誤：問題渲染項目列表中反應

Cannot read property 'map' of undefined

我缺少什麼/做錯了什麼在我的代碼？

import React, {Component} from 'react'; 
import RecipeListItem from './RecipeListItem'; 

const RecipeList = ({recipes}) => { 

    const Items = recipes.map((recipe) => { 
     return <RecipeListItem key={recipe.id} recipe={recipe} /> 
    }); 

    return (
     <div> 
      {Items} 
     </div> 
    ) 
} 

export default RecipeList

來源

2017-10-09 karolis2017

'recipes'定義在哪裏？組件如何接收這些數據？如果你'console.log（食譜）'會發生什麼？ – skwidbreth

我猜，父組件通過'recipes'作爲它的狀態的道具 - 你有沒有在父母的狀態中定義'recipes'？ – skwidbreth

是的。我已經在App.js中的構造函數中定義了食譜，然後我有但我看到我沒有將狀態傳遞給該組件。我試着像傳遞它，但它不起作用。 – karolis2017

我強烈建議不要整個父狀態傳遞給孩子 - 設置它是這樣的：

在App.js，通過道具，像這樣：

<RecipeList recipes={this.state.recipes} />

然後只是參考props在孩子 -

const RecipeList = (props) => { 

    const Items = props.recipes.map((recipe) => { 
     return <RecipeListItem key={recipe.id} recipe={recipe} /> 
    }); 

    return (
     <div> 
      {Items} 
     </div> 
    ) 
} 

export default RecipeList

來源

2017-10-09 03:12:12 skwidbreth

非常感謝。在我的代碼中，我引用的不是道具，而是{recipes}：'const RecipeList =（{recipes}）=> {'最佳做法是什麼？ – karolis2017

沒有。實際上，當我使用像{recipes}這樣的解構時，我最終得到了這樣的效果：'const Items = recipes.map（（recipe）=> {' – karolis2017

對不起，我誤解了你以前的評論。將整個父母狀態傳遞給孩子 – skwidbreth

問題渲染項目列表中反應

回答

相關問題