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

Posted 2021-05-04

我一直绞尽脑汁试图用我的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. 在每种成分之后有一个x删除该特定成分
6. 单击铅笔图标时，每个配方底部的+按钮将更改为x。然后可以使用它删除该特定配方

答案

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

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

至

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