javascript - 在react和Typescript中使用不可变帮助器更新两级嵌套对象(Updating a two level nested object using immutability-helper in react and typescript)

Question

I have an array of object called TourStop, which is two level nested.

(我有一个称为TourStop的对象数组，该对象是两层嵌套的。)

The types are as below.

(类型如下。)

TourStops = TourStop[]

 TourStop = {
  suggestions?: StoreSuggestion[]
  id: Uuid
}
 StoreSuggestion= {
  id: Uuid
  spaceSuggestions: SpaceSuggestion[]
}

SpaceSuggestion = {
 id: Uuid
 title: string
}

My goal is to remove a particular StoreSuggestion from a particular TourStop I have written the following code(uses immutability-helper and hooks)

(我的目标是从特定的TourStop删除特定的StoreSuggestion ，我编写了以下代码（使用immutability-helper和hooks）)

const [tourStopsArray, setTourStopsArray] = useState(tourStops)
  // function to remove the store suggestion
  const removeSuggestionFromTourStop = (index: number, tourStopId: Uuid) => {

   // find the particular tourStop
    const targetTourStop = tourStopsArray.find(arr => arr.id === tourStopId)

   // Update the storeSuggestion in that tourstop
    const filteredStoreSuggestion = targetTourStop?.suggestions?.filter(sugg => sugg.id !== index)

    if (targetTourStop) {

     // create a new TourStop with the updated storeSuggestion
      const updatedTargetTourStop: TourStopType = {
        ...targetTourStop,
        suggestions: filteredStoreSuggestion,
      }

      const targetIndex = tourStopsArray.findIndex(
        tourStop => tourStop.id == updatedTargetTourStop.id,
      )

      // Find it by index and remove it
      setTourStopsArray(
        update(tourStopsArray, {
          $splice: [[targetIndex, 1]],
        }),
      )

     // add the new TourStop
      setTourStopsArray(
        update(tourStopsArray, {
          $push: [updatedTargetTourStop],
        }),
      )
    }
  }

The push action works correctly.

(push作正常工作。)

However the splice action doesn't work for some reason.

(但是，由于某种原因， splice操作无法正常工作。)

What am I doing wrong?

(我究竟做错了什么？)

  ask by Sooraj Chandran translate from so

Answer 1

等待大神答复