Reactjs，如何从数组中实例化对象，并更新渲染

Question

我无缘无故地与 reactjs 作斗争。我对背后的魔法有点困惑，我无法执行从数组中添加对象/删除对象并显示它的简单操作。

我的父母，我有一个方法可以点击添加一个新元素：

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