無法訪問兒童組件行動

Question

我收到一個錯誤Cannot read property 'handleDeleteAll' of undefined。 這是我的代碼：

const RecipeList = (props) => { 

const Items = props.recipes.map((recipe) => { 
    return <RecipeListItem key={recipe.id} recipe={recipe} /> 
}); 
     console.log(props); 
     return (
     <div> 
      <button onClick={this.props.handleDeleteAll}>Remove All</button> 
      <div> 
      {Items} 
      </div> 
     </div> 
    ) 
} 
export default RecipeList; 

這是回購：https://github.com/kstulgys/fcc-recipe-box/blob/master/src/components/RecipeList.js

Answer 1

RecipeList是一個函數不是類。您可以使用props.handleDeleteAll而不是this.props.handleDeleteAll訪問處理程序。

Answer 2

RecipeList是一個無狀態的功能組件，所以this.props是未定義的。

改變這一行

<button onClick={this.props.handleDeleteAll}>Remove All</button> 

這一行

<button onClick={props.handleDeleteAll}>Remove All</button>