Question

我使用 React 创建了一个简单的预算应用。用户可以通过填写输入来添加收入/费用说明和值，最终结果将添加到“费用/收入”列表中。

我设法添加了收入/支出值（数字）：我创建了一个setState，其收入为[1、3、4]，围绕收入数组进行映射，并通过更新状态打印出这些值。

我不明白如何添加说明。我已经在Stack上检查了一些问题，但是它们仅使用setState并为每个元素（收入，incomeValues，支出，expenseValue）创建状态，这不是我想要的。

有没有一种方法可以在不涉及太多州的情况下进行？也许使用对象？

Answer 1

您的状态是一个对象

{
  monthlyBudget: 0,
  incomesSum: 0,
  expensesSum: 0,
  incomes: [0],
  expenses: [0]
}

除了将更多的数字添加到收入数组之外，您可以做的是在收入数组中添加对象。就像您猜中的一样。

{
  monthlyBudget: 0,
  incomesSum: 0,
  expensesSum: 0,
  incomes: [
    { amount: 0, description: 'some description' },
    { amount: 1, description: 'second description' },
  ]
  expenses: [0]
}

在这种情况下，您仍将使用map来访问对象的属性。

this.sate.incomes.map(income => {
  // do something with income.amount
  // do something with income.description
})

渲染多个输入React

1 个答案: