Блог

Я пытаюсь отобразить данные ответа через результирующий массив map в дочерний элемент react (innerHTML). В настоящее время я выводю null в качестве данных, даже если я вижу истинные данные в заголовках ответа.

Это функция поиска

  lookup = () => {
    console.log('Step 1. Smartystreets - Define Lookup.');
    let lookup = new Lookup();
    lookup.street = this.state.shippingAddress.addressLine1;
    lookup.street2 = this.state.shippingAddress.addressLine2;
    lookup.city = this.state.shippingAddress.city;
    lookup.state = this.state.shippingAddress.state;
    lookup.zipCode = this.state.shippingAddress.zipCode;
    lookup.match = 'strict';
    lookup.maxCandidates = 1;

    console.log('Step 2. Send the lookup to smartystreets.');
    client.send(lookup)
    .then((response) => {
      console.log('Step 3. Show the resulting candidate addresses:');
      console.dir(response);
      response.lookups[0].result.map(this.buildTextOutput);
    })
    .catch((response) => {
      console.warn(response);
    });
 }
 buildTextOutput = () => {
  const candidateOutput = document.getElementById("verifiedAddress");
  const outputElement = document.createElement('verifiedAddressResults');
  outputElement.innerHTML = candidate.deliveryLine1   '<br>'   candidate.lastLine;

  candidateOutput.appendChild(outputElement);
}  
}
  

Мне нужно вывести кандидата.deliveryLine1 candidate.lastLine как дружественный к реакции, чтобы я мог предоставить пользователю возможность выбрать выходной результат в качестве адреса и setState в качестве новых данных ответа… Я думаю, что я довольно близок… есть какая-нибудь помощь?

Во-первых, я бы рекомендовал избегать прямого манипулирования DOM с помощью таких методов, как .innerHTML — React хорошо справляется с настройкой и эффективным рендерингом вашей страницы, когда ее оставляют в покое, но может возникнуть проблема, если вы неожиданно измените DOM таким образом.

Что касается вашего вопроса, я бы сохранил ответ на состояние компонента, а затем сопоставил данные в строке следующим образом:

 // in lookup function
client.send(lookup)
    .then((response) => {
      console.log('Step 3. Show the resulting candidate addresses:');
      console.dir(response);
      this.setState({addresses: response.lookups[0].result})
    })

// in render function
{this.state.addresses.map((address) => {
    return (
        // Desired markup here
    )
})}