неопределенная переменная React JS - PullRequest
Новая
       9

неопределенная переменная React JS

0 голосов
/ 04 июня 2018

я впервые пишу код в Javascript / React JS, поэтому я не уверен, что здесь не так.getLicensees () отправляет запрос GET в мой API и возвращает всех лицензиатов.Это работает до сих пор, также журналы консоли работают и печатают правильное значение. 

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);
  });
}

Я пытаюсь сгенерировать таблицу из всей информации внутри моего объекта лицензиатов.Но я не могу использовать this.state.licensees[0].city внутри моего метода render (). 

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}) - это правильный способ присвоения значения объекту состояния.

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Сначала вы хотите переместить вызов API в componentDidMount вместо того, чтобы делать это в конструкторе, поскольку это не сработает, поскольку ваш компонент уже рендерится до того, как вы получите данные.

Затем вам нужно использовать setState, чтобы вызвать функцию рендеринга для отображения обновленного значения.как это:

this.setState({licensees}); вместо того, чтобы изменять состояние напрямую, как 

this.state.licensees = licensees;

подробнее здесь Использование состояния правильно

Вы также хотели бычтобы дождаться значения до тех пор, пока вы не попытаетесь получить к нему доступ, вам придется внести это изменение и в ваш рендер. Вместо этого: 

<td>{this.state.licensees[0].city}</td>

сделайте это 

{this.state.licensees && <td>{this.state.licensees[0].city}</td>} //only render when you have the value in the state.
0 голосов
/ 04 июня 2018

Проблема в том, что, хотя у вас есть запрос API в конструкторе, он будет возвращать ответ только после цикла рендеринга, и, поскольку вы напрямую изменяете состояние в разрешенном обещании, повторный рендеринг не вызывается.

Что вам нужно сделать, это вызвать вызов API в методе жизненного цикла componentDidMount и обновить свое состояние с помощью 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);
    });
}
...