React.js，如何实例化数组中的对象并更新渲染

Question

我无缘无故地在React。 我对背后的魔术感到困惑，无法执行添加对象/从数组中删除对象并显示它的简单操作。

我是我的父母，我有一个方法，单击后会添加一个新元素：

  appendNewPma(){
    var newPma = this.state.pma.slice();
    newPma.push(PmaType1);
    this.setState({pma:newPma})
  }

然后我的渲染方法是这样的：

  render() {
    return (
      <div>
        <a className="waves-effect waves-light btn" onClick={this.appendNewPma}>new</a>
        {this.state.pma.map((Item, index) => (
          <Item
            key       = {index}
            ref       = {"pma" + index.toString()}
            onDelete  = {() => this.onDelete(index)}
            title     = {index}/>
        ))}
      </div>
    );
  }

追加工作正常，但是我的数组不包含要显示的对象，而是一个我不理解的神奇函数。

但是当我尝试删除对象时：

  onDelete(idx){
    console.log(idx);
    var pma = this.state.pma.slice();
    pma.splice(idx, 1);
    this.setState({pma:pma})
  }

当我从数组中删除时，无论我要删除什么索引，它都只会删除最后一个对象。 我知道我的代码不好，但是我不知道如何为一个对象数组渲染元素（这里我的数组是函数构造函数的列表）。 如果可以直接引用我的对象，效果会更好。 当然，我尝试从ReactDom中删除，但是很高兴我没有从父级进行更新...

我只想要带有更新的简单数组推/弹出模式。

谢谢你的帮助

Answer 1

尝试下面的代码。 希望它能解决您的问题。

  addToArray = (event) => {
    this.state.pma.push({"name ": "xyz"});
    this.setState(
      this.state
    )
  }
  removeFromArray =(index) => {
    var updatedArr = this.state.pma.splice(index, 1);
    this.setState({arr : updatedArr})
  }