Обновите дочерний элемент класса на основе идентификатора в реакции

Question

У меня есть интерфейс.

  export interface DefaultFormList {
  defaultFormItems?: DefaultFormItems[];
  }

и

export interface DefaultFormItems {
  id: string;
  name: string;
  formXml: string,
  isDefaultFormEnable: boolean;
}

Я хочу обновить форму Xml на основе определенного идентификатора, остальные не нужно менять.

Ниже приведен фрагмент кода, в котором я пытаюсь обновить форму Xml на основе идентификатора формы.

Как я могу действовать дальше, строки ниже приведены только для справки.

  const updatedDefautItems: DefaultFormItems[] = { ...this.state.defaultFormList.defaultFormItems, 
  formXml: updatedFormXmlString };

Answer 1

const { defaultFormList: { defaultFormItems } } = this.state;

const list = [...defaultFormItems];
const item = list.find(i => i.id === formId);
const index = list.findIndex(i => i.id === formId);
if(item){
list.splice(index , 1 , {...item , formXml: updatedFormXmlString,});
}
this.setState({defaultFormList: { defaultFormItems : [...list]}});

Answer 2

Чтобы обновить базу formXml для конкретного id, необходимо добавить в свой фрагмент кода следующий код:

const { defaultFormList: { defaultFormItems } } = this.state;

const itemIndexToUpdate: number = defaultFormItems
  .map(item => item.id)
  .indexOf(formId);

const updatedDefaultItems: DefaultFormItems[] = [
  ...defaultFormItems.slice(0, itemIndexToUpdate),
  {
    ...defaultFormItems[itemIndexToUpdate],
    formXml: updatedFormXmlString,
  },
  ...defaultFormItems.slice(itemIndexToUpdate + 1),
]