一,需求
- 说明:添加多个司机信息并带有删除功能,整体看下来是没什么难度的,定义一个数组用来存司机信息,然后用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中的规定(如下图)采用该方式
三、总结
(头大~谁敢想就在编辑这篇博客的时候看到了这段一语道破天机的话)少看了几句话……,总结人家文档里都有╮(╯﹏╰)╭