ReactJS не отображает результаты моего вызова API
В React у меня есть состояние с именем views_res, которое представляет собой список. Я делаю вызов API в viewsList(), который должен отображать результаты вызова API в эту переменную состояния. Однако, когда я отлаживаю с помощью console.info(), я вижу «Пуск» и «ЧТО ДЕЛАТЬ», но представления пусты :(
Я знаю, что конечная точка API верна, так как Postman показывает мне правильный ответ JSON. Однако моя переменная состояния просто не получает данные. Я не уверен, где я иду не так с этим!
В целях конфиденциальности я отредактировал точную конечную точку API.
componentDidMount() {
this.ViewsList();
}
// Gets views from Wistia API
ViewsList() {
console.info("start", this.state.views);
// API call
$.getJSON(
"url"
)
// JSON format
.then(response => {
response.json();
})
.then(data => {
// Map over data
let views_res = data.response.map(item => (
<div>
console.info("play_count", {item.play_count})
<h1>{item.play_count}</h1> */}
</div>
));
// Set the state
this.setState({ views: views_res });
});
console.info("WHAT UP DOE", this.state.views);
}
setState также является асинхронным. вы можете просмотреть его во втором варианте обратного вызова в setState
Привет, я привязываю ViewList к классу. Но я не знаю, что вы имеете в виду, когда говорите, что я могу просмотреть «второй вариант обратного вызова». Извиняюсь
this.setState({ views: views_res }, () => { console.info(this.state.views)});Кроме того, не создавайте свой код JSX таким образом. Получите данные, установите их как свое состояние, затем создайте свой JSX в своем методе render, как обычно.
Вы пытаетесь преобразовать ответ в json и передать его в следующий раздел? Потому что со скобками response.json(); не будет возвращен для использования в следующем then(). "play_count" печатается? Также обратите внимание на этот stackoverflow.com/questions/33194423/…. (Это обещания в целом, а не только реактивные)
@HammerN'Songs Нет, «play_count» не печатается, даже если я удалю скобки вокруг response.json ()
@JohnRuddell Я пробовал это, но это не решило проблему.
@devserkan Это лучший стиль?
.then(response => response.json())?
@ЮниусЛ. Я пробовал это, согласно ответу HammerN'Songs, но это не исправило ситуацию.
попробуйте добавить блок catch .then(data => ...).catch(e => console.info(e))
Я бы посоветовал попробовать добавить .done() в конец цепочки promise.then().then() (см. ссылку в предыдущем комментарии) и проверить stackoverflow.com/questions/33237200/….
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не уверен, какую библиотеку вы используете для $.getJson (это jQuery?), но обратите внимание, что setStateэто асинхронная операция. Это означает, что вы хотите «увидеть» изменения, если вы console.info после того, как позвонили setState.
Однако есть второй аргумент для setState, который представляет собой функцию обратного вызова, которая будет запущена после фактического обновления состояния.
this.setState({ views: views_res }, () => {
// this is a callback function for setState.
// this coode will run just after the state actually updated
console.info("WHAT UP DOE", this.state.views)
})
Из ДОКУМЕНТОВ:
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied
Редактировать
Обратите внимание, что эта часть:
<div>
console.info("play_count", {item.play_count})
<h1>{item.play_count}</h1> */}
</div>
Ничего не будет логировать, т.к.
console.info("play_count", {item.play_count})
Это просто строка внутри блока JSX. Если вы хотите писать выражения JavaScript внутри блока JSX, вы должны заключить его в фигурные скобки ({}):
См. работающий пример:
function App() {
return (
<div>
<div>
console.info("i am just a string")
{console.info('I will show in the console')}
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root">но play_count не регистрируется, что означает, что это состояние даже не получает наборов.
почему он должен регистрировать это? это просто string внутри JSX блока
ты привязываешься
ViewsListк классу? в конструктореthis.ViewsList = this.ViewsList.bind(this)