Javascript 通过映射到子html元素来呈现响应数据。。。使用React和updatestate

我试图通过生成的映射数组显示响应数据，以响应子元素（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);
}  
}

lookup=（）=>{
log（'步骤1.Smartystreets-定义查找'）；
让lookup=新的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；
log（'步骤2.将查找发送到smartystreets'）；
client.send（查找）
。然后（（响应）=>{
log（'步骤3.显示生成的候选地址：'）；
console.dir（应答）；
response.lookups[0].result.map（this.buildTextOutput）；
})
.catch（（响应）=>{
控制台。警告（响应）；
});
}
buildTextOutput=（）=>{
const candidateOutput=document.getElementById（“verifiedAddress”）；
const outputElement=document.createElement（'verifiedAddressResults'）；
outputElement.innerHTML=candidate.deliveryLine1+'
'+candidate.lastLine；
candidateOutput.appendChild（outputElement）；
}  
}

---

我需要将candidate.deliveryLine1+candidate.lastLine输出为react-friendly，这样我就可以向用户提供一个选项，选择输出结果作为地址，设置状态作为新的响应数据。。。我想我很接近。。。有什么帮助吗？

首先，我建议不要直接使用

之类的方法来操作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
    )
})}

---

成功了！我的下一个问题是，如果我在回答中有一个4字符的代码来输出不同的可能解决方案，例如代码1=AABB（这将输出-你忘记你的公寓号码了吗？）诸如此类。您将如何在react中实现类似的内容？这听起来像是您希望在字符之间创建某种映射，如

const responses={AABB:“您忘记公寓号了吗”}

。如果你能接受我最初的回答，我将不胜感激：）