After the react form is deleted, the value of value is moved to the next input

problem description

using the project written by react and mbox, I made the form control into a component and then looped through the parent component, which can be edited or deleted after being added. Now there is a problem. After adding multiple entries, enter 123 in the key of the first entry and then click delete under the current one. The value of key 123 will be moved to the key of the next entry.
1. The parent component loops the array
2 under store. Each time it is added, it push an empty object in the array of store
3. After clicking delete, you will get the current index, search the array for matching objects according to the index, and then splice

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)
Loop
< 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>

Code for adding part:
addText = () = > {

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

Array under

}
store:
@ observable caseSelectRequests = []; delete function:
/ / delete request parameter item
@ action.bound reduceCaseSelectRequest (index, bool) {

under
store

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

}

what result do you expect? What is the error message actually seen?

how to solve the problem of asking the Great God

{ 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 }