react 表单删除后value的的值移动到下一个input

Question

问题描述

利用react和mbox编写的项目，我将表单控件做成了组件，然后在父组件里面循环，通过添加后，可以编辑，也可以删除。现在出现了一个问题，添加多条后，在第一条的key里输入123然后点击当前该条下的删除后，key的值123会移动到下条的key中。
1.父组件循环的是store下的数组
2.每次添加时都是向store的数组里push一个空的对象
3.点击删除后会获取到当前的index，根据索引去数组里寻找符合的对象然后splice

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
循环部分
<Form layout="inline">

            {
              this.props.stores.caseSelectRequests && this.props.stores.caseSelectRequests.length
                ? caseSelectRequests.map((val, key) => (
                  <CaseParamSelect
                    version={version}
                    key={key}
                    index={val.i}
                    formIndex={key}
                    data={val}
                    appList={appList}
                    dataSetList={dataSetList}
                    dataSetKeyList={dataSetKeyList}
                    getDataSetList={getDataSetList}
                    getDataSetKey={getDataSetKey}
                    form={form}
                    reduceCaseSelectRequest={reduceCaseSelectRequest}
                />
                )) : null
            }
          </Form>

添加部分的代码：
addText = () => {

this.props.stores.case.addCaseSelectRequest({ type: 1, i: Math.random() });

}
store下的数组：
@observable caseSelectRequests = [];
store下的删除function：
// 删除请求参数项
@action.bound reduceCaseSelectRequest(index, bool) {

if (bool) return this.caseSelectRequests = [];
const x = this.caseSelectRequests.findIndex(item => item.i === index);
const a = this.caseSelectRequests.splice(x, 1);
return a;

}

你期待的结果是什么？实际看到的错误信息又是什么？

求问大神这个问题怎么解决

Answer 1

不要用数组的索引作为key，包括formIndex，都不要用数组的索引

 {
              this.props.stores.caseSelectRequests && this.props.stores.caseSelectRequests.length
                ? caseSelectRequests.map((val, key) => (
                  <CaseParamSelect
                    version={version}
                    key={val.id} //唯一并且稳定的值
                    index={val.i}
                    formIndex={key.id} //唯一并且稳定的值
                    data={val}
                    appList={appList}
                    dataSetList={dataSetList}
                    dataSetKeyList={dataSetKeyList}
                    getDataSetList={getDataSetList}
                    getDataSetKey={getDataSetKey}
                    form={form}
                    reduceCaseSelectRequest={reduceCaseSelectRequest}
                />
                )) : null
            }

Answer 2

这个问题就是典型的使用索引当key引起的。
建议每动态生成一个item时，直接生成一个惟一的key。eg: {key: Date.now()},删除的时候，直接根据key，将数组中的数据删除了就好了。