javascript - 未定义的React JS变量

这是我第一次使用Javascript / React JS进行编码，因此我不确定这里出了什么问题。 getLicensees()向我的API发送GET请求，并返回所有被许可人。到目前为止，这仍然有效，控制台日志也正在工作并打印正确的值。

constructor(props) {
super(props);

this.state = {licensees: []};

let licenseeResponse = LicensingService.getLicensees()
  .then(licensees => {
    this.state.licensees = licensees;
    console.log("component", licensees);
    console.log(licensees[0].city);
  });
}

我正在尝试根据被许可人对象内的所有信息生成一个表格。但是我不能在render()方法中使用this.state.licensees[0].city。

render() {
return (
  <main id="content">
    <div id="head">
      <h4 className="headline">
        Liste aller Lizenznehmer
      </h4>

      <div className="licenseeTable">
        <table>
          <tr>
            <th>Lizenz nehmer</th>
            <th>Aktuelles Zertifikat</th>
            <th>Details</th>
          </tr>
          <tr>
            <td>{this.state.licensees[0].city}</td>
            <td>test2</td>
            <td>test3</td>
          </tr>
        </table>
      </div>
    </div>
  </main>
);
}

我该怎么做呢？

-我的解决方案:

componentDidMount() {
console.log('component did mount..', this);
LicensingService.getLicensees()
  .then(licensees => {
    this.setState({licensees});
    console.log(licensees);
  });
}

...

{
            this.state.licensees.map(license => {
              return <tr>
                <td>{license.company}</td>
                <td>{license.testCertificate.toString()}</td>
                <td>{license.city}</td>
              </tr>
            })
          }

this.setState({licensees})是将值分配给状态对象的正确方法。

最佳答案

问题在于，尽管您的API请求位于构造函数中，但它仅在渲染周期之后才会返回响应，并且由于您直接在已解析的Promise中更改状态，因此不会调用重新渲染。

您需要做的是在componentDidMount生命周期方法中调用API，并使用setState更新状态

constructor(props) {
   super(props);

   this.state = {licensees: []};

}

componentDidMount() {
    LicensingService.getLicensees()
      .then(licensees => {
        this.setState({licensees});
        console.log("component", licensees);
        console.log(licensees[0].city);
    });
}