在 React js 中更新对象的状态数组答案

【问题标题】：Updating state Array of objects in React js在 React js 中更新对象的状态数组
【发布时间】：2021-08-06 11:50:30
【问题描述】：

大家好，我被这个问题困住了，我也想更新状态，我的数据是这种形式，当我更新状态时，它会从状态中删除所有内容，我不知道如何实现这一点，请帮助示例代码

   appoinments:[ {
      date: "2021-06-04",

      id: 12,
      app_type: 2,
      section: 4,

      title: "PZR 60",
      patient: "Gerber, Susanna",
      pat_nr: 27,
      behandler: "Greifenberg, Wolfgang",
      zimmer: "Prophylaxe",
      kategorie: "Bestell-Patient",

      von_min: 720,
      bis_min: 780,

      color: "#FFF2CC",
      border_color: "#006666",
      badge_color: "hsl(200, 50%, var(--hsL45))",
      vorbereitung: 0,
      nachbereitung: 0,
    },
    {
      date: "2021-06-05",

      id: 13,
      app_type: 2,
      section: 4,

      title: "PZR 60",
      patient: "Gerber, Susanna",
      pat_nr: 27,
      behandler: "Greifenberg, Wolfgang",
      zimmer: "Prophylaxe",
      kategorie: "Bestell-Patient",

      von_min: 720,
      bis_min: 780,

      color: "#FFF2CC",
      border_color: "#006666",
      badge_color: "hsl(200, 50%, var(--hsL45))",
      vorbereitung: 0,
      nachbereitung: 0,
    },
  ],`

我只想更新

  section: 3,
        von_min :  433,
        bis_min : 234,
        date : new date()

我正在使用以下方法进行更新，但没有成功，请帮助

  this.setState(prevState => ({
      calendar: {                   // object that we want to update
      ...prevState.calendar, 
      appointments:{
        section: params.section,
        von_min :  params.newFrom,
        bis_min : item.von_min + length,
        date : date_string
      },   // keep all other key-value pairs
        // update the value of specific key
      }
    }))

【问题讨论】：

另一方面，如果您能够完成您的项目，我建议您看看 Immer，它对于处理深/大对象非常有用 - immerjs.github.io/immer

标签： javascript arrays json reactjs javascript-objects

【解决方案1】：

试试这个（没有测试代码，只是展示概念）：

this.setState(prevState => ({
  calendar: {
    ...prevState.calendar, 
    appointments: prevState.calendar.appointments.map(x => ({
      ...x,
      section: params.section,
      von_min:  params.newFrom,
      bis_min: item.von_min + length,
      date: date_string
    })),
  },
}));

【讨论】：

嗨，谢谢它有效，但唯一的问题是它会更新每个我想一次只更新一个的对象:)。我怎样才能实现我的索引号处于状态所以我怎样才能根据索引只更新一个对象

【解决方案2】：

好的，所以你的约会是一个数组，当你这样做时：

this.setState(prevState => ({
  calendar: {                   // object that we want to update
  ...prevState.calendar, 
  appointments:{
    section: params.section,
    von_min :  params.newFrom,
    bis_min : item.von_min + length,
    date : date_string
  },   // keep all other key-value pairs
    // update the value of specific key
  }
}))

您将appointments 的状态设置为一个对象。您必须将状态设置为一个新数组，其中包含更改的元素以及其余的原始数据。

this.setState(prevState => ({
  calendar: {
    ...prevState.calendar, 
    appointments: prevState.calendar.appointments.map((item) => {
      if (item.section === 3) {
          return {
             ...item,
             von_min :  433,
             bis_min : 234,
             date : new date()
          }
      }
      return item
    }),
  },
}));

【讨论】：