无法访问儿童组件行动

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>