reactJs在一個數組內的對象內setState改變屬性

Question

我改變了一個數組內的對象的屬性，但這次它是一個數組中的數組中的一個數組...

我在更改圖片預覽時遇到了問題。

這沒有任何影響：

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) 
}); 

感謝。

Answer 1

問題是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) 
}); 

Answer 2

嘗試使用immutability-helper UTIL來解決它。

早些時候，這個util包含在react-addons-update模塊中。

Answer 3

的解決辦法是

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) 
    });