Reactjs 使用react钩子操纵状态，

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

我的状态是这样的：

{
    "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个值： 预付款， 剩余款项， 总使用量

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

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

---

这在react中是一个非常常见的问题，尤其是当它们有嵌套数据时，更新状态

你本可以想一想，找到一个解决办法，但我知道你来自哪里

您的句柄更改函数应该是这样的

consthandlechange=（e，index）=>{
常量{name，value}=e.target；
const yearlySummaryCopy=[…data.yearlySummary]；
yearlySummaryCopy[索引]。数据[名称]=值；
setData（（prevData）=>({
…以前的数据，
年鉴摘要：年鉴摘要副本
}));
};

这里的数据变量是存储状态的变量。。。。 如果您使用的是基于类的组件，可以这样说。state.data

---

您还可以检查位于

的代码沙盒。您应该获得对象的副本，更改字段，然后将状态对象设置为复制的对象。我知道我应该做什么，只是不太确定如何做。没错！非常感谢你！

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