обновить состояние вложенного массива реагировать - PullRequest
Новая
       12

обновить состояние вложенного массива реагировать

0 голосов
/ 25 мая 2019

Невозможно обработать вложенный массив в состоянии реакции, вот что я пытаюсь, мне нужно нажать значение в this.state.form.contentFormArr 

    let langulageform, contentObj,contentFormArr;   

   contentObj={heading:'',subheading:''};
    contentFormArr=[this.contentObj]

    langulageform =[
            {key:"Ar",lang:"Arabic",contentFormArr:this.contentFormArr},
            {key:"En",lang:"English",contentFormArr:this.contentFormArr},
            {key:"Ru",lang:"Russian",contentFormArr:this.contentFormArr},
            {key:"Sp",lang:"Spanish",contentFormArr:this.contentFormArr},
            {key:"Ve",lang:"Vetnamese",contentFormArr:this.contentFormArr}
        ];

    constructor(){
            super()

            this.addContentArea = this.addContentArea.bind(this)

            this.state={
                form:this.langulageform
            }

        }


    addContentArea(index){


            this.setState((state)=>{

                const contentformArr = [...state.form[index].contentFormArr,this.contentObj]

                return{
                    ...state.form.contentFormArr,
                    contentformArr
                }
            })

        }

Я сделал несколько форм, перебирая массив this.state.form. Теперь мне нужно, когда пользователь нажимает на любую кнопку окна формы, чтобы добавить больше полей, тогда он будет выдвигать значение в конкретном индексном массиве, а затем будет повторять больше полей.

1 Ответ

0 голосов
/ 26 мая 2019

Ну, я сделал это, но я думаю, что способ, которым я пользуюсь, не является хорошей практикой.Сначала я сделал исправление для массива, который я установил в качестве начального значения, потому что до того, как мне было присвоено значение массива contentForm, когда я вносил в них изменения, он устанавливал изменения повсюду в состоянии объекта. 

langulageform =[
  {key:"Ar",lang:"Arabic",contentFormArr:[{heading:'',subheading:''}]},
  {key:"En",lang:"English",contentFormArr:[{heading:'',subheading:''}]},
  {key:"Ru",lang:"Russian",contentFormArr:[{heading:'',subheading:''}]},
           {key:"Sp",lang:"Spanish",contentFormArr:[{heading:'',subheading:''}]},
           {key:"Ve",lang:"Vetnamese",contentFormArr:[{heading:'',subheading:''}]}
    ];

Во-вторых, я создаю один пустой массив и помещаю в него все значения, чтобы в него можно было вставить значение. Это невозможно сделать в состоянии из-за неизменяемого объекта, и после получения правильного индексного объекта я внес исправления и вернул объект.

addContentArea(index){
this.setState((state)=>{

  let Arr=[];

  state.form.map((e,i)=>{
     Arr.push(e);

     if(i===index){
        Arr.contentFormArr.push({})
     }

  })



  return{
     Arr
   }
})
}

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

...