我需要将一个特定值更改为状态内的嵌套对象，因此我想使用旧状态 + 需要更改的新值来克隆状态。

我的状态如下所示：

{
    "startDate": "2020-12-04T00:00:00.000Z",
    "endDate": "2022-12-04T00:00:00.000Z",
    "yearlySummary": [
        {
            "year": "11/2020-11/2021",
            "data": {
                "actualUsage": 0,
                "actualUsagePayment": 0,
                "actualFixedFee": 57600,
                "actualTotalPayment": 57600,
                "pricePerUnit": 110.39999999999999,
                "forecastUsagePayment": 500,
                "totalUsage": 500,
                "totalPayment": 500,
                "remainingUsagePayment": 0,
                "remainingFixedFee": 0,
                "remainingTotalPayment": 0
            }
        },
        {
            "year": "11/2021-11/2022",
            "data": {
                "actualUsage": 0,
                "actualUsagePayment": 0,
                "actualFixedFee": 57600,
                "actualTotalPayment": 57600,
                "pricePerUnit": 110.39999999999999,
                "forecastUsagePayment": 300,
                "totalUsage": 300,
                "totalPayment": 300,
                "remainingUsagePayment": 0,
                "remainingFixedFee": 0,
                "remainingTotalPayment": 0
            }
        }
    ],
    "total": {
        "actualUsage": 0,
        "actualUsagePayment": 0,
        "actualFixedFee": 115200,
        "actualTotalPayment": 115200,
        "pricePerUnit": 220.79999999999998,
        "forecastUsagePayment": 800,
        "totalUsage": 800,
        "totalPayment": 800,
        "remainingUsagePayment": 0,
        "remainingFixedFee": 0,
        "remainingTotalPayment": 0
    }
}

我需要使用 onChange 函数更改 inputField 中键的 3 个值： forecastUsagePayment、 remainingUsagePayment、 totalUsage

因此我的输入字段如下所示：

data.yearlySummary.map((year, index) => (
  <input
   className={classes.input}
   name="forecastUsagePayment"
   key={index}
   onChange={(e) => handleChange(e, index)}
   value={year.data.forecastUsagePayment}
  />
))

onChange 函数应该是什么样子？

到目前为止，我得到的只有这些：

  const handleChange = (e, index) => {
    const { name, value } = e.target;
    setData((prevData) => ({
      ...prevData,
      // What should come next?
    }));
  };