react删除数组内的对象，画面表示不对

Question

react做了一个简单的追加删除功能，两个button，
add在画面上加一个text控件，delete删除控件，

问题：追加text，放在数组里，删除的时候从第1个删除，但是实际删的是最后一个

代码如下

import React,{Component} from 'react';

var textList = [];

export default class Test extends Component {
    constructor(props){
        super(props);
        this.state = {
            children:[],
        }
        this.add = this.add.bind(this);
        this.delete = this.delete.bind(this);
    }
    add(){
        let length = this.state.children.length;
        textList.splice(this.state.children.length, 1, <input type="text" ref={(ref)=>this["text" + length] = ref}/>);
        this.setState({children : textList});
    }

    delete(){
        textList.splice(0,1);
        this.setState({children : textList});
    }

    render(){
        return(
        <div>
            <input type="button" onClick={this.add} value="add"/>
            <input type="button" onClick={this.delete} value="delete"/>
            <div id="div" ref={(ref)=>this.ref = ref}>
                {this.state.children}
            </div>
        </div>)
    }
}

追加后在文本框里写入012，点删除应该删除0的入力框，结果删除的是3

Answer 1

https://blog.csdn.net/Anything2207294253/article/details/92674345