Javascript 嵌套状态同步尝试生成动态列表组件失败

我试图开发一个动态列表组件，它涉及到statesnyc。我不得不承认目前的设计很糟糕，不可读，但至少我已经取得了一些进展。然而，我无法解决一个问题，删除有一个错误

要复制它：

单击“添加更多”两次，以添加2个新项目

填写最后一个下拉列表的值

删除第二个列表

---

有些地方不对劲，它假定删除第二项并保留最后一项的状态。

问题不在于如何删除状态，而在于如何呈现状态，实际上，您正在使用times函数创建一个循环，循环将迭代

行数

次数并给出索引

您所需要做的就是像这样迭代数据对象

return (
  <div className="companyContactInfo-addContact">
    {Object.keys(company_contacts).map(i => this.singleContact(i))}

    <div className="row">
      <div className="col-xs-12">
        <a onClick={::this.addNewRow}>
          <span>Add</span>
        </a>
      </div>
    </div>
  </div>
);

---

我对您的沙盒做了一些修改，考虑到其他更改，例如在进行更改之前为setState和克隆state使用

prevState

语法，我的情况下是否需要行数？不，不需要，您可以直接使用它。我不确定我最初是如何想出一个糟糕的设计的，事实上，我是在做尝试和错误，让这项工作，对你来说，你会做的第一步是什么？我宁愿有一个对象数组，而不是嵌套对象。我可以帮你清理沙箱

  handleInputChange(e, index) {
    let targetedContact = this.state.company_contacts[index];
    targetedContact.value = e.target.value;

    this.setState({
      company_contacts: {
        ...this.state.company_contacts,
        [index]: targetedContact
      }
    });
  }