Javascript 如何动态创建和删除元素（包含输入、p-s、按钮），这些元素有自己的删除按钮

情况是：这是一个react应用程序，有一个按钮，它用自己的remove按钮创建一个元素。创建的元素包含输入、段落标记和按钮。我已经有好几天不能删除的错误是：假设删除第n个这样的元素，它有一个段落p{index}/p（index=n）和输入类型=“text”{index}/input，事情是在删除该元素之后（我们再也看不到它的段落了）输入的文本正在替换第n+1个输入的文本，n+1个输入的文本替换第n+2个输入的文本，依此类推。当第n+k个输入的大小等于列表大小时，n+k个输入消失

const defaultList=[];
const List = (props) => (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>
          {item}
          <br />
          <button onClick={() => 
            props.removeItem(index)}>Remove</button>
        </li>
      ))}
    </ul>
  );

export default class Accounts extends React.Component {
    constructor(props) {
        super(props);
        this.addItem = this.addItem.bind(this);
        this.state={
            items: defaultList,
            created:0
        }    
    }

    removeItem(removeIndex) {
        this.setState((state) => ({
          ...state,
          items: this.state.items.filter((item, index) => index !== removeIndex)
        }))
      }

    addItem(){
        const temp = this.state.items;
        temp.push(
        <div>
            <p>{this.state.created}</p>
            <input name="text" type="text" id={"input "+this.state.created}/>
            </div>
        );
        this.setState(() => ({
            items: temp,
            created:++this.state.created
        }))
    }
    render(){
    return(<div>
    <List items={this.state.items} removeItem={this.removeItem.bind(this)} />
    <button  onClick={this.addItem}>Add item</button>
    </div>
    }
}

constdefaultlist=[]；
常量列表=（道具）=>(

{props.items.map（（项目，索引）=>(

{item}


props.removietem（index）}>Remove

))}

);
导出默认类帐户扩展React.Component{
建造师（道具）{
超级（道具）；
this.addItem=this.addItem.bind（this）；
这个州={
项目：默认列表，
已创建：0
}    
}
removeItem（removeIndex）{
this.setState（（状态）=>({
状态
项：this.state.items.filter（（项，索引）=>index！==removeIndex）
}))
}
附加项（）{
const temp=this.state.items；
临时推力(
{this.state.created}

);
此.setState（（）=>({
项目：临时，
创建：++this.state.created
}))
}
render（）{
返回(
添加项
}
}

---

嗯，我不能提供它是如何工作的图像，因为这是我的第一篇文章，我需要至少10个等级来添加图像：/

这段代码中唯一的问题是我认为你应该写的

const temp = [...this.state.items];

---

除此之外，一切正常

问题在于如何使用

Array.prototype.push（）

method，它正在更改原始数组并作为内联结果返回新的数组长度。当处理处于react状态的数组时，最好使用map、filter和reduce等方法，因为它们不会影响目标数组，而与push相反，map返回一个新的、修改过的数组。希望这有帮助，如果您需要此方法的源代码

t对于答案，我尝试了你的解决方案，但没有成功。最令人难以置信的是，在删除第5项后，用id=“input 5”（例如）在input中编写的文本替换了第6项输入文本。