javascript - 渲染多个输入 React

Question

我使用 React 创建了一个简单的Budget 应用。用户可以通过填写输入来添加收入/费用描述和值(value)，最终结果将添加到费用/收入列表中。

我设法添加了收入/支出值(数字):我创建了一个包含收入的 setState:[1、3、4]，映射收入数组并通过更新状态打印出这些值。

我不明白如何添加描述。我已经在 Stack 上检查了一些问题，但他们只使用 setState 并为每个元素(收入、收入值、费用、费用值)创建一个状态，这不是我想要的。

有没有办法在不涉及太多状态的情况下做到这一点？也许使用对象？

Github Link

Answer 1

你的状态是一个对象

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

除了向 incomes 数组添加更多数字之外，您还可以向 incomes 数组添加对象。和你猜的一模一样。

{
  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
})