Form 组件在 Form.Item 子节点 onChange 方法中设置表单值异常问题

[GleanCoder1116]

在 Form.Item 子节点 onChange 方法调用setFieldsValue 。对该表单中的Form.List值进行设置。数据显示错误

import React from 'react'
    import { Grid, Button, Radio, Input, Form } from '@hi-ui/hiui'\n
    class Demo extends React.Component {
      constructor() {
        super()
        this.form = React.createRef()
        this.state = {
          initialValues:{
            phone:'123',
            testList:[{first: ['1'],last: "yuyt"}]
          },
          rules: {
            name: {
              required: true,
              message: <span style={{color: '#ccc'}}>请输入名称</span>,
              trigger: 'onBlur,onChange'
            },
            region: {
              required: true,
              message: '请选择区域',
              trigger: 'onChange'
            },
            count: {
              required: true,
              trigger: 'onChange',
              validator: (rule, value, cb) => {
                const count = +value
                if(isNaN(count)) {
                  cb('请输入数字')
                } else if(count <= 0) {
                  cb('必须是正数')
                } else {
                  cb()
                }
              }
            }
          }
        }
      }
    
      handleSubmit() {
        this.form.current.validate((valid,error) => {
          if(!error) {
            console.log(valid)
            alert('submit')
          } else {
            console.log('error',error)
            return false
          }
        })
      }
    
      cancelSubmit() {
        this.setState({
          form: {
            name: '',
            region: '',
            count: ''
          }
        })
        this.form.current.resetValidates()
      }
    
    
      render(){
        const Row = Grid.Row
        const Col = Grid.Col
        const FormItem = Form.Item
        const FormList = Form.List
        const FormSubmit = Form.Submit
        const FormReset = Form.Reset
    
        return (
            <Row>
            <Col span={12}>
              <Form
                ref={this.form}
                initialValues={this.state.initialValues}
                rules={this.state.rules}
                labelWidth='80'
                labelPlacement='right'
                onValuesChange={(changedValues, allValues) => {
                  console.log(
                    'changedValues:',
                    changedValues,
                    'allValues:',
                    allValues
                  )
                }}
              >
              <FormItem 
              label='账号' 
              field={"phone"} 
              rules={{
              trigger:'onChange',
              type:'number',
              required:true,
              validator: (rule,value,callback) => {
                const telReg = /^[1][3|4|5|6|7|8|9][0-9]{9}$/
                if(!value){
                  callback("请输入手机号")
                } else if (!telReg.test(value)){
                  callback("请输入正确的手机号")
                } else {
                  callback()
                }
              },
              }}>
              <Input placeholder='请输入手机号' />
            </FormItem>
                <FormList name='testList'>
                  {(fields, { add, remove }) => {
                    return (
                      <div className='list'>
                        {fields.map((field, index) => (
                          <div style={{ display: 'flex' }} key={index}>
                            <FormItem
                              {...field}
                              name = 'first'
                            >
                            <Select placeholder='请输入' style={{width:'200px'}} data={[
                              { title:'电视', id:'3' },
                              { title:'手机', id:'2' },
                              { title:'笔记本', id:'4' },
                              { title:'生活周边', id:'5' },
                              { title:'办公', id:'6' }
                            ]}
                            onChange={()=>{
                              let data = this.form.current.getFieldsValue()
                              data.testList[1].last = 'PPPP'
                              this.form.current.setFieldsValue({
                                testList: data.testList
                              })
                            }}
                            />
                            </FormItem>
                            <FormItem
                              {...field}
                              labelWidth='0'
                              name = 'last'
                            >
                              <Input placeholder='请输入' style={{width:'200px'}}/>
                            </FormItem>
                            <span style={{paddingTop:'6px'}}>
                              <Icon
                                name='close'
                                style={{
                                  color: '#999',
                                  fontSize: '16px',
                                  cursor: 'pointer',
                                }}
                                onClick={() => {
                                  remove(field)
                                }}
                             />
                            </span>
                          </div>
                        ))}
                        <div style={{ 
                            marginLeft: '80px',
                            width: "200px",
                            textAlign: "center",
                            border: '1px dashed #ccc',
                            borderRadius: '2px',
                            marginBottom: '24px',
                        }}>
                          <Button
                            type='line'
                            appearance='link'
                            icon='plus'
                            onClick={() => {
                              add()
                            }}
                          >
                            添加选项
                          </Button>
                        </div>
                      </div>
                    )
                  }}
                </FormList>
    
                <FormItem>
                  <FormSubmit
                    type='primary'
                    onClick={(values, errors) => {
                      console.log('Get form value:', values, errors)
                    }}
                  >
                    提交
                  </FormSubmit>
                  <FormReset
                    type='line'
                    onClick={() => {
                      console.log('reset form')
                    }}
                  >
                    重置
                  </FormReset>
                  <Button type="primary" appearance="link" onClick={()=>{
                    console.log('填充表单')
                    let data = this.form.current.getFieldsValue()
                    data.testList[1].last = 'PPPP'
                    this.form.current.setFieldsValue({
                      testList: data.testList
                    })
                }}>fill Form</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
        )
      }
    }