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

Reactjs，如何从数组中实现对象，以及更新渲染

1 个答案: