react 表单项动态删除,删掉的是最后一个,因为index

项目中有一个动态添加、删除时间选择框

每次点击删除都会把最后一个删掉,查了百度都说是key的问题,对比了下,最终的问题在index,把name={`time${index}`},改为name={`time${item.id}`}

所以在遍历后,不要把index用于元素个项的识别上,例如:key name等

{
                      timeList.map((item, index) => (
                          <FormItem
                          key={item.id}
                            label={index === 0 ? '时间' : ''}
                            {...formItemLayout}
                            wrapperCol={index === 0 ? null : {offset: 3}}
                            required
                            requiredMessage="请选择时间">
                              <TimePicker
                              name={`time${index}`}
                              defaultValue={item.time}
                              />
                              <Icon type="minus" className="del-icon"  onClick={() => delTimeList(index, item)}/>
                              </FormItem>
                          )
                      )
                    }