0

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

4

1 回答 1

0

好吧，我做到了，但我认为我使用的方式不是好的做法。首先，我对设置为初始值的 Array 进行了更正，因为之前我将数组值设置为 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
   }
})
}

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

于 2019-05-26T05:29:15.893 回答