У меня снова проблема с изменением свойства объекта внутри массива, но на этот раз это массив в массиве в массиве ...

У меня проблема с изменением предварительного просмотра изображения.

Это не имеет никакого эффекта:

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

Благодарю.

0
Felix 30 Авг 2017 в 15:46

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)
    });
0
Felix 30 Авг 2017 в 13:49

Попробуйте решить проблему с помощью утилиты immutability-helper.

Ранее эта утилита была включена в модуль response-addons-update.

1
chuve 30 Авг 2017 в 13:19

Проблема в том, что возвращаемое значение 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)
});
1
Shubham Khatri 30 Авг 2017 в 13:18