Question

无法在反应状态下处理嵌套数组，在这里我想尝试在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数组制作了多个表单，现在我需要在用户单击任意表单框按钮以添加更多字段时，它将在特定的索引数组中推送值，然后将迭代更多字段。

Answer 1

我做到了，但是我认为我使用的方式不是好习惯。首先，我对Array进行了更正，将其设置为状态的初始值，因为在进行更改时，我将数组值设置为contentForm数组，因此它对状态Object的所有位置都进行了更改。

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

之所以这样做，是因为我觉得处理多维不可变数组有点棘手，这不是一种优化的方法，但是它每次都能工作，而且我检查了React组件生命周期方法是否也可以正常工作。

更新嵌套数组状态reactjs

1 个答案: