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>

无法访问子组件中的操作

2 个答案: