根据react中的id更新子类元素

Question

我有一个接口。

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

和

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

我想根据特定的id更新formXml，其余不需要更改。

下面是我尝试基于formId更新formXml的代码片段。

下面几行仅供参考。

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

要更新基于特定id的formXml，您应该在下一个代码段中添加：

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),
]