用钩子推送新的键/值来状态 - React

Question

我正在尝试使用钩子将一对键/值（来自 2 个输入）推送到现有状态。

这是我的 JSX：

<div className="mt-2 text-left flex flex-wrap">
                        <fieldset>
                            <label htmlFor="newIncomeName"></label>
                            <input className="w-32 border italic p-1 text-gray-500 text-xs" id="newIncomeName"
                                name="newIncomeName"
                                type="text"
                            />

                            <label htmlFor="newIncomeAmount"></label>
                            <input className="w-32 border italic p-1 text-gray-500 text-xs" id="newIncomeAmount"
                                name="newIncomeAmount"
                                type="number"
                            />
                        </fieldset>
                        <button onClick={handleAddIncome}>
                            <i className="fas fa-check text-gray-400 hover:text-green-500 text-xs mt-1 p-1"></i>
                        </button>
                    </div>

这是我的功能：

  const handleAddIncome = () => {
        let incomeName = document.getElementById('newIncomeName').value
        let incomeAmount = document.getElementById('newIncomeAmount').value
        let data = [
            [incomeName], incomeAmount
        ]
        setUserWalletIncomes({ ...userWalletIncomes, data })
}

如您所见，我希望incomeName 成为键，incomeAmount 成为值。

我的实际状态是这样的：

{income1: 1300, income2: 1300, income3: 1300, incometest: 400}

我的功能不起作用，它创建了一个名为“数据”的键，并且金额反应不佳。在第一次点击时，它会很好地推送，但在第二次点击时，它会删除最后一次推送，而不是添加新的推送。

我是新来的钩子。谢谢你的帮助？？？？

Answer 1

您需要将数据更改为对象：

let data = {
  [incomeName]: incomeAmount
}

setUserWalletIncomes({ ...userWalletIncomes, ...data })