Reactjs Ajax возвращает первый пустой массив при получении объекта json
У меня проблема. Я изучаю React JS, и у меня есть шаблон, который я должен отредактировать. Мне нужно добавить несколько методов ajax для получения и отправки информации. Мне удается выполнить некоторые из этих действий, но теперь у меня есть проблема.
У меня есть PHP-скрипты, которые получают мне json_encode.
getCategories: function() {
$.ajax({
url: '#########my_url#########',
dataType: 'json',
success: function(data) {
this.setState({datas: data});
}.bind(this)
});
},
и у меня есть это
getInitialState: function() {
return {datas: []};
},
Проблема в том, что я всегда получаю сначала пустой массив, а затем результат. И когда я пытаюсь работать с ним, я получаю сообщение об ошибке, потому что он пытается отобразить пустой массив. Это файл console.log, прежде чем я попытаюсь поиграть с объектом.
[HMR] Waiting for update signal from WDS...
[]
[WDS] Hot Module Replacement enabled
[Object, Object, Object, Object]
Как я могу заставить его работать после того, как объект заполнен?
Решение
Первый вариант: визуализировать ваш взгляд на успех вызова ajax
Второй вариант: предвидеть случай, когда ваш state.datas все еще пуст
например, если вы работаете в вашей функции рендеринга, попробуйте:
{ this.state.datas ? <div> Loading </div> : <....
Выше синтаксис JSX
Надеюсь, поможет
РЕДАКТИРОВАТЬ:
if(this.state.datas.length == 0) {
var mycomponent =<div> Loading ... </div>;
} else {
var mycomponent = this.state.datas;
}
В основном это должно работать.
Другие решения
Других решений пока нет …