使用antd的Form.create包装组件，用到getFieldDecorator方法来收集表单数据时出现的页面更新问题

一，需求

• 说明：添加多个司机信息并带有删除功能，整体看下来是没什么难度的，定义一个数组用来存司机信息，然后用map循环遍历一下构建出基本的结构，添加用push方法，删除用splice的索引删除方法，但问题就出在每次进行删除操作时，不管点击第几行数据的删除按钮，都删除最后一行数据！！就离谱~
• 因为之前有做过类似的功能，就还是按照之前的思路写的，前几次的功能是没有问题的，只有这次遇到了这种情况，反复思考到底是哪一步出了问题……，之后想到以前实现这个功能时都是用的原生输入框，单独收集数据，这次用的是组件自带的方法，问题是不是就出在这儿？

二、问题复现

• 构建页面代码：

drivers.map((item: any, index: any) => (
              <Row key={index}>
                <Col span={8}>
                  <Form.Item label="司机姓名">
                    {getFieldDecorator(`driverRecruits[${index}].driverName`,
                      {
                        initialValue: item.driverName
                      })(<Input disabled={getFieldValue('driverNumber') === 0}
                      onChange={(e) => this.handleNameChange(e, index)}
                    />)}
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <PhoneInputBox
                    label='司机联系方式'
                    fieldValue={`driverRecruits[${index}].driverPhone`}
                    form={form}
                    options={{
                      initialValue: item.driverPhone
                    }}
                    isRequired={false}
                    disabled={getFieldValue('driverNumber') === 0}
                    handlePhoneChange={(e) => this.handlePhoneChange(e, index)}
                  />
                </Col>
                <span style={{ color: '#169BD5', fontSize: '12px', marginLeft: '3%', lineHeight: '34px' }} onClick={() => { index === 0 ? this.addClick() : this.deleteClick(index) }}>{index === 0 ? '添加司机' : '删除'}</span>
              </Row>
            ))

• 删除事件里的代码逻辑：

// 删除司机事件处理
  deleteClick = (index: any) => {
    const { drivers } = this.state
    const deleteDrivers = [...drivers]
    console.log(deleteDrivers)
    deleteDrivers.splice(index, 1)
    console.log(deleteDrivers)
    this.setState({
      drivers: deleteDrivers
    }, () => {
      console.log(this.state.drivers)
    })
  }

• 删除第三条数据（司机姓名12434）

页面上：

•  打印结果：

 问题来了！！为什么state里面的数据都更新了，而页面上的数据跟state不对应呢？？

最后实在是理解不了为什么会出现这种情况，找同事看了一下这个问题，也是很疑惑，后面通过尝试用setFieldsValue这个方法重新把state里的值遍历赋值到对应的输入框中（贴代码），这样写页面上的数据就正常更新了，也就解决问题了

// 删除司机事件处理
  deleteClick = (index: any) => {
    const { drivers } = this.state
    const deleteDrivers = [...drivers]
    deleteDrivers.splice(index, 1)
    this.setState({
      drivers: deleteDrivers
    }, () => {
      this.state.drivers.forEach((elem: any, i: any) => {
        this.props.form.setFieldsValue({
          [`driverRecruits[${i}].driverName`]: elem.driverName,
          [`driverRecruits[${i}].driverPhone`]: elem.driverPhone
        })
      })
    })
  }

         [`driverRecruits[${i}].driverName`]: elem.driverName,
         [`driverRecruits[${i}].driverPhone`]: elem.driverPhone

这里采用[]的属性表示方式，主要是由于``字符串拼接是一个表达式，没法直接作为属性名，所以参照ES2015中的规定（如下图）采用该方式

 三、总结

 （头大~谁敢想就在编辑这篇博客的时候看到了这段一语道破天机的话）少看了几句话……，总结人家文档里都有╮(╯﹏╰）╭