React中setState方法修改包含数组、对象的属性

问题描述

有如图所示对象：

现在要修改图中红框标注的属性“examiner”(原值为“2345”)，设置为我们在Input标签里的onChange方法传进来的值。由于属性是state的某个属性对象中的、数组中的、对象中的、数组中的、对象的某个属性，（有点绕，看图应该可以看清层级关系），所以直接使用setState方法是不行的。

解决方法

思路： 先取原state的最顶层属性(要修改的属性包含于该最顶层属性之下)赋值给某个变量，再遍历该变量中的数组，当要改变的属性是该索引下的元素(或包含于该元素下)，则判断是否到要修改的属性的父层，否则，是数组就继续遍历……直到满足条件，此时再调用setState将整个变量赋值给state即可。

代码：

render: (text, record, index) => (
  <Input
    value={record.examiner}
    onChange={e => {
      const tmpData = this.state.curData
      tmpData.tplData.map((item1, index1) => {
        if(index1 === this.state.curReviewIndex){
          item1.content.map((item2, index2) => {
            if(index2 === index){
              item2.examiner = e.target.value
              this.setState({
                curData: tmpData
              })
              return 0
            }
            return 0
          })
        }
        return 0
      })
    }}
  />
)