Question

我有一个React / Webpack应用程序，遇到了一些问题。我对React很陌生，所以我想我缺少了一些简单的东西。

我有一个数组，用于保存用户帐户的地址。我试图添加一个启动模式的编辑按钮，以便用户可以编辑特定的已保存地址。

这是我的代码，以遍历已保存的地址并显示按钮：

<React.Fragment>
    {savedAddresses.map(data => {
    const address = {
      firstName: data.firstname,
      lastName: data.lastname,
      address1: data.address1,
      address2: data.address2,
      address3: data.address3,
      city: data.city,
      state: data.state,
      postalCode: data.postalcode,
      country: data.country
    };
    const contact = {
      email: data.email,
      phoneNumber: data.phonenumber
    };
    return (
      <div className="saved-address" styleName="styles.saved-address" key= 
    {data.name}>
        <AppliedAddress address={address} contact={contact} />
        <button styleName="form.submit"
          onClick={() => this.submitSavedAddress(data.name)}>
          Send to this Address
        </button>
        <button styleName="form.submit"
          onClick={() => this.openEditAddressModal()}>
          Edit
        </button>
        {this.state.isEditingAddress && (
          <EditAddressModal
            firstName={data.firstName}
          />
        )}
        {this.state.isProcessing && <ProcessingAnimation />}
      </div>
    )
  })}
</React.Fragment>

模态正在启动，但是我传递的数据正在针对每个保存的地址进行更新，并且在加载模态时，数据显示的是最后保存的地址，而不是单击的地址。在此示例中，我传递了名字字段。

我有三个已保存的地址，具有唯一的名字[Dan，Eric，Jane]。

我添加了一个调试器，并且可以看到每个地址的名字段都在更新，因此，在加载模式时，即使单击“丹的”地址上的按钮，也始终选择“简”。

有人知道我可能只为了将数据传递给所选地址而想念什么吗？

我假设isEditingAddress在其他地址上为false会阻止该数据通过，但似乎不正确。

在循环内将数据传递到React Modal

0 个答案: