Undefined переменная React JS
это мой первый раз, когда я кодирую Javascript / React JS, поэтому я не уверен, что здесь не так. getLicensees () отправляет запрос GET в мой API и возвращает всех лицензиатов. Пока это работает, также логи консоли работают и печатают правильное значение.
constructor(props) {
super(props);
this.state = {licensees: []};
let licenseeResponse = LicensingService.getLicensees()
.then(licensees => {
this.state.licensees = licensees;
console.info("component", licensees);
console.info(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.info('component did mount..', this);
LicensingService.getLicensees()
.then(licensees => {
this.setState({licensees});
console.info(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}) - правильный способ присвоить значение объекту состояния.
Вы изменили свой setState на этот this.setState({licensees}); ??
да :--)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что, хотя у вас есть запрос API в конструкторе, он вернет ответ только после цикла рендеринга, и, поскольку вы напрямую изменяете состояние в разрешенном обещании, повторный рендеринг не вызывается.
Что вам нужно сделать, так это вызвать API-вызов в методе жизненного цикла componentDidMount и обновить свое состояние с помощью setState
constructor(props) {
super(props);
this.state = {licensees: []};
}
componentDidMount() {
LicensingService.getLicensees()
.then(licensees => {
this.setState({licensees});
console.info("component", licensees);
console.info(licensees[0].city);
});
}
Спасибо! Это мне помогает :)
Рад, что помогли :-)
но есть еще одна проблема, он говорит, что: Объекты недействительны как дочерние элементы React (найдено: объект с ключами {city, ...}. Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив. Я попытался сформировать его в массив, но он говорит, что не может этого сделать, потому что его undefined Я пытался сформировать его в массив, но он говорит, что он не может этого сделать, потому что его undefined
Можете ли вы добавить свой массив лицензий в вопрос
Отредактируйте неправильный пост фейспалм, посмотрите его сейчас на мой исходный вопрос :)
Я имел в виду, чтобы вы добавили образец ответа для лицензиатов.
ты имеешь ввиду это?
Сначала вы хотите переместить вызов 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.
* Offtopic: вы можете посмотреть официальную документацию, я думаю, что есть небольшая проблема в вашей логике установленного состояния, reactjs.org/docs/state-and-lifecycle.html, хотя состояние в React является объектом, и его можно установить непосредственно в конструкторе, это более уместно использовать метод
setStateвне конструктора (например, в ловушкеcomponentDidMount) при извлечении некоторых данных (я предполагаю, чтоgetLicensees- это некоторый асинхронный код)