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

Question

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

我在代码中添加了大量注释，以帮助您理解代码的结构以及代码的哪些部分应该执行的操作。 Click here to see the code

我将此项目作为FreeCodeCamp课程的一部分。我是React的新手，也是JavaScript的初学者，所以我可能犯了一个我无法找到的愚蠢错误。我也在这个项目中使用Sass。

以下是我面临的问题：

1. 按钮随机不起作用（即，当我用一个解决问题时，说添加成分/删除配方的按钮，另一个按钮停止工作，说删除成分的按钮，并出现一个新问题）。
2. 如果我在modifyRecipe()组件的App函数中对少数情况进行评论，则其他案例开始正常工作。但不是在一起。例如，如果我评论前2个案例，则最后两个案例开始工作。
3. 经过几次解决错误的迭代后，我发现同样的问题再次出现，我几小时前已经解决了。

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

UI的工作原理如下：

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

Answer 1

您缺少绑定功能。请在第259行和第260行有一个厕所

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

到

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