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呼び出しの戻り値がどこにも使用されていないという問題があります。あなたは、私が外

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のを使用してみてくださいアウトSETSTATEに複雑な計算をしないために、あなたに助言し、抽象的になるしかし

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

にコードを変更する必要があります。

これ以前のこのユーティリティは、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) 
    });