[英]reactJs setState change property on object within an array within an array
我再次遇到了更改數組內部對象的屬性的問題,但是這次它是數組中數組中的一個數組...
我在更改圖片預覽時遇到問題。
這沒有效果:
return {
...picture,
preview: "hallo"
}
完整的代碼是:
this.setState((prevState) => ({
stepsData: prevState.stepsData.map(step => {
if (step.identifier === stepIdentifier) {
console.log("lkkljk",step)
step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return {
...step,
[targetArray]: newArray,
}
}
return step
})
}), () => {
console.log(this.state.stepsData)
});
謝謝。
問題是step.onChangeContentComponents.map
調用的返回值未在任何地方使用。 您必須將代碼更改為
this.setState((prevState) => ({
stepsData: prevState.stepsData.map(step => {
if (step.identifier === stepIdentifier) {
console.log("lkkljk",step)
var newStep = step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return newStep
}
return step
})
}), () => {
console.log(this.state.stepsData)
});
但是我建議您不要在setState中進行復雜的計算,而應該像這樣在外部抽象計算
var stepsData = [...this.state.stepsData];
stepsData = stepsData.map(step => {
if (step.identifier === stepIdentifier) {
var newStep = step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return newStep
}
return step
});
this.setState({stepsData}, () => {
console.log(this.state.stepsData)
});
嘗試使用immutability-helper util來解決它。
之前,該實用程序已包含在react-addons-update模塊中。
解決方案可能是
let stepsData = [...this.state.stepsData];
stepsData = stepsData.map(step => {
if (step.identifier === stepIdentifier) {
return {
...step,
[targetArray]: newArray,
onChangeContentComponents: step.onChangeContentComponents.map(contentComponent => {
if (contentComponent.pictures !== null) {
return {
...contentComponent,
pictures: contentComponent.pictures.map(picture => {
console.log(picture)
return {
...picture,
preview: "hallo"
}
})
}
}
return contentComponent
}
)
}
}
return step
});
this.setState({stepsData: stepsData}, () => {
console.log(this.state.stepsData)
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.