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}

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

我是钩子的新手。谢谢帮助?

Answer 1

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

let data = {
  [incomeName]: incomeAmount
}

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

使用钩子将新的键/值推送到状态 - React

1 个答案: