Передача данных в React Modal внутри цикла - PullRequest
Новая
       13

Передача данных в React Modal внутри цикла

0 голосов
/ 14 октября 2018

У меня есть приложение 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>

Модал запускается, но данные, которые я передаю, обновляются для каждого сохраненного адреса, и при загрузке модала данные показывают последний сохраненный адрес, а не адрес, по которому щелкнули.В этом примере я передаю поле имени.

У меня есть три сохраненных адреса с уникальным именем [Дэн, Эрик, Джейн].

Я добавил отладчик и вижу, что поле имени обновляется для каждого адреса, поэтому при загрузке модального сообщения всегда выбирается «Джейн» даже при нажатии кнопки на адресе «Дэна».

Кто-нибудь знает, чего мне не хватает, чтобы передать только данные по выбранному адресу?

Я предположил, что isEditingAddress, ложный на других адресах, предотвратит передачу этих данных, но кажется, что это неверно.

...