клонирование реквизитов, которые мы получаем в this.props вactjs при использовании redux

Question

Я получаю определенные данные, поступающие из глобального хранилища, и мне нужно добавить определенное свойство в поступающий реквизит.Исходя из принципов редукса, я не должен ничего менять прямо в этом.реквизиты, но я определенно могу их клонировать, чтобы изменения отражались, но только в клонированной копии вместо этого .props.Как можно достичь Я добавляю кусок кода, чтобы сделать вещи более понятными.

 if(this.props
        && this.props.student
        && this.props.student.students
        && this.props.student.students.data



    ){
        cloneddata=this.props.student.students.data;
         console.log("cloneddata",cloneddata);

            console.log("noddie2",this.props.student.students.data);
            if( cloneddata.data && cloneddata.data.length>0){
                cloneddata.data.map((item)=>{
                    if(item.attendance===undefined){
                        item.attendance=[
                            {
                                status:"a",
                                studentId:item._id
                            }
                        ]
                    }
                })
            }
            console.log("clonedata after",cloneddata);

Я вижу, что даже после того, как все в переменную clonedata, я все еще получаю новые вещи в this.props.

Answer 1

Поскольку вы присваиваете this.props.student.students.data непосредственно для cloneddata, оно определяется по ссылке, и, следовательно, любое изменение в клонированных данных также отражается в подпорках

Вместо этого вам необходимо создать копию своих данных

 if(this.props
    && this.props.student
    && this.props.student.students
    && this.props.student.students.data



){

        console.log("noddie2",this.props.student.students.data);
        if( this.props.student.students.data.data && this.props.student.students.data.data.length>0){
            cloneddata = this.props.student.students.data.data.map((item)=>{
                if(item.attendance===undefined){
                    return {
                      attendance: [
                        {
                            status:"a",
                            studentId:item._id
                        }
                      ]
                   }
                } 
                return { ...item }
            })
        }
        console.log("clonedata after",cloneddata);

Answer 2

Не уверен, что это хорошая идея, но вы можете попробовать это:

cloneddata = this.props.student.students.data.map(item => ({...item}))

Таким образом, он создает мелкую копию item.Если вам нужна глубокая копия, вы можете использовать что-то вроде: https://www.npmjs.com/package/clone-deep