javascript - 如何调试我的 React Recipe Box 代码？

Question

我一直在绞尽脑汁试图找出我的 React Recipe Box 的问题。 。该项目位于 CodePen 上。

我在代码中添加了大量注释，以帮助您理解代码的结构以及代码的哪一部分应该做什么。 Click here to see the code .

我正在将此项目作为 FreeCodeCamp 类(class)的一部分。我是 React 新手，而且 JavaScript 还处于初级水平，所以我可能犯了一个我找不到的愚蠢错误。我也在这个项目中使用 Sass。

以下是我面临的问题:

1. 按钮随机不起作用(即，当我用一个按钮解决问题时，说添加成分/删除配方的按钮，另一个按钮停止工作，说删除成分的按钮，然后从那里出现一个新问题)。
2. 如果我在 modifyRecipe() 中评论几个案例App的功能组件其他情况开始正常工作。但没有在一起。例如，如果我评论前 2 个案例，则后两个案例开始工作。
3. 经过几次迭代解决错误后，我发现几个小时前已经解决的相同问题再次出现。

您可能会在控制台中发现的第一个错误是 this.props.deleteIngredient is not a function里面deleteMe Ingredient的功能组件。

用户界面的工作方式如下:

1. 使用大金添加新配方AddButton
2. 只需单击文本本身即可编辑文本。文本可水平滚动
3. 使用每个配方框中的小添加按钮将成分添加到配方中
4. 通过单击每个配方框中的铅笔图标来访问删除按钮
5. 有一个x在每种成分之后删除该特定成分
6. +每个菜谱底部的按钮更改为 x当您单击铅笔图标时。然后它可以用于删除该特定配方

Answer 1

您缺少绑定(bind)函数。请上厕所259和260行

this.deleteIngredient = this.deleteIngredient(this);
this.modifyIngredient = this.modifyIngredient(this);

至

this.deleteIngredient = this.deleteIngredient.bind(this);
this.modifyIngredient = this.modifyIngredient.bind(this);