我是一名全方位的新程序员，并尝试通过构建一个小应用程序来学习 React，该应用程序可以计算一个人有多少现金（我的孩子可以使用的应用程序）。我正在动态创建 5 个组件，每个组件都有一个输入字段。这些输入字段接受一个条目（一个数字）并将该输入乘以我从一个对象（20 美元、10 美元、5 美元、2 美元和 1 美元的固定金额）映射出的 5 个组件中的每一个的固定金额。那部分效果很好。 10 美元 x 2 显示给我 20 美元。
但是，要在键入时将所有 5 个帐单金额总计相加，我想我需要将它们放入一个数组中，然后获取数组的总和以显示最终总数。事情不正常，上周我一直在寻找一种方法来编写我的onChange 处理程序。我完全被卡住了。任何帮助将不胜感激。对于任何难以阅读的代码，我深表歉意。
这是jsfiddle（请原谅缺少样式）
【问题讨论】：
标签： javascript arrays reactjs
我可以通过打开 javascript 控制台（F12 或右键单击 -> 检查）轻松找到错误。
抛出错误是因为您确实将 handleCashInput 作为道具传递给 CashItemsList
<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />
同时使用带有 reduce 的数组也不是一个好主意，因为如果您删除一个数量并重新输入它，总数将是错误的。我做了以下解决它：
我使用对象而不是数组{ 1: 0, 2: 0, 3: 0, 4: 0, 5: 0}
我将账单 ID 传递给 handleCashInput 以便能够更改金额 this.props.onChange(this.props.bill.id, newBillSubTotal)
const cashTemp = this.state.billFinalTotal;cashTemp[id] = newBillFinalTotal; const bt = this.props.billFinalTotal;const total = bt[1] + bt[2] + bt[3] + bt[4] + bt[5];
这是我的JSFiddle
【讨论】：
你的小提琴有两个问题。
首先，您没有将 onChange 道具从 Parent 传递给 CashItemsList。所以我改变了：
<CashItemsList key={bill.id} bill={bill} />
到：
<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />
第二个问题是 array.push() 的返回不是完整的数组，所以在 Parent 上的“handleCashInput()”方法中，使用 array.concat() 而不是 array.push() 解决了这个问题，通过改变这个：
const cashTemp = this.state.billFinalTotal.push(newBillFinalTotal)
到：
const cashTemp = this.state.billFinalTotal.concat(newBillFinalTotal)
这是一个更新的小提琴：https://jsfiddle.net/ggtu71gh/1/
注意：您似乎没有实现小计功能，因此这只会尝试修复您已经实现的错误。
【讨论】：