javascript - 嵌套状态同步尝试构建动态列表组件失败

Question

我正在尝试开发一个动态列表组件，其中涉及状态snyc。我不得不承认当前的设计很糟糕，不可读，但至少我已经取得了一些进步。但是我无法解决问题，删除有一个错误。

https://codesandbox.io/s/wkqoz0wwv8

重现它:

1. 点击“添加更多”两次，添加 2 个新项目。
2. 填写最后一个下拉列表的值。
3. 删除第二个列表。

那里有些不对劲，它应该删除第二项并保留最后一项的状态。

Answer 1

问题不在于如何删除状态，而在于如何渲染它，您实际上是使用 times 函数创建一个循环，该循环将迭代 row_count 次并为您提供索引,

您需要做的就是迭代数据对象，例如

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

此外，一旦修改了重复的变量，您可以将其分配给状态，而不是使用扩展运算符

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

<强> Working Sandbox