Как отложить возврат в React до завершения выборки
Я использую React js и хочу отображать данные, полученные из API, с помощью Fetch. проблема в том, что я не могу отобразить результаты выборки, потому что область возврата React исключает выполнение метода выборки !! Пожалуйста, помогите, как я могу это решить ???
это часть функции, выполняющей Fetch:
initFourSquare = () => {
return fetch(FourSquareAPI)
.then(data => {
return data.json()
})
.catch((error) => {
console.info(error.message)
})
};
это часть рендеринга реакции, где я вызвал функцию (initFourSquare)
render() {
var info = []
this.initFourSquare().then(response => {
info = response.response.venues
console.info(info) //the result is appear here
})
setTimeout(function(){ console.info(info[0].name) }, 1000);//the result is appear here
return (
<div>
<h1>{info}</h1> // it display nothing !!!
</div>
);
}
}
Большое спасибо за вашу полезную информацию, да, моя проблема была забыта, позвоните в состояние, чтобы обновить рендеринг
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вместо этого любой API / асинхронный вызов не должен выполняться в функции рендеринга, вы должны сделать это в функции componentDidMount, если это должно быть выполнено один раз, что кажется вашим случаем, и установите ответ в состоянии, которое вы можете использовать при рендеринге. Убедитесь, что вы либо правильно инициализировали состояние, либо предоставили условную проверку существования перед использованием переменной состояния.
class App extends React.Component {
state = {
info: []
}
componentDidMount() {
var info = []
this.initFourSquare().then(response => {
info = response.response.venues
this.setState({info})
})
}
initFourSquare = () => {
return fetch(FourSquareAPI)
.then(data => {
return data.json()
})
.catch((error) => {
console.info(error.message)
})
};
render() {
const { info } = this.state;
return (
<div>
<h1>{info}</h1>
</div>
);
}
}
большое спасибо, я изменил свой код в соответствии с вашим советом, но все еще получил пустой массив в области возврата рендеринга !!
Вы вызываете setState, который вызовет повторный рендеринг, как только данные станут доступны?
Да, это решение, я забыл вызвать состояние для обновления рендера, большое спасибо
Ключевым моментом здесь является то, что вы должны обновлять состояние компонента всякий раз, когда выполняется асинхронный вызов. Обратите внимание, что загрузка асинхронного контента на самом деле не отличается от обработки любого другого события, с той лишь разницей, что «вы» (программа) инициировали выборку, которая в конечном итоге приводит к событию загрузки контента. Загрузка содержимого должна инициироваться не
render, аmountingкомпонента. Визуализация компонента означает: «представление его текущему состоянию представлению».