Множественные вызовы API в React
Я делаю приложение, в котором получаю данные из API. Как только я получу эти данные, я хочу сделать еще один вызов того же API с конечной точкой, которую я получил от первого вызова.
fetch(req)
.then((response)=>(
response.json()
)).then((json)=>{
console.info(json)
json.meals.map((obj)=>{
let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
let req = new Request(url,{
method: 'GET',
headers: header
})
fetch(req)
.then((response)=>(
response.json()
)).then((json)=>{
console.info(json);
this.setState((prevState)=>{
recipe: prevState.recipe.push(json)
})
})
})
this.setState(()=>{
return{
data: json
}
})
})
Я делаю здесь два запроса на выборку, но проблема в том, что данные из первого ответа выводятся после второго запроса на выборку. Также state: data устанавливается перед state: recipe, и компоненты рендерится с данными из state: data.
render(){
return(
<div className = "my-container">
<EnterCalorie getData = {this.getData}/>
<MealData data = {this.state.data} recipe = {this.state.recipe}/>
</div>
)
}
Как я могу убедиться, что оба передаются одновременно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
fetch(req) // req no1
.then((response)=>(
response.json()
)).then((json)=>{
console.info(json)
json.meals.map((obj)=>{
let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
let req = new Request(url,{
method: 'GET',
headers: header
})
fetch(req) // req no 1 called again
.then((response)=>(
response.json()
)).then((json1)=>{
console.info(json1);
this.setState((prevState)=>{
recipe: prevState.recipe.push(json1)
})
this.setState(()=>{
return{
data: json
})
})
})
})
})
Я думаю, вы снова вызываете api с теми же параметрами req во втором вызове fetch
Я получаю свои данные для обоих вызовов, но state: data передается и обрабатывается, а после этого выбирается state: recipe.
да, это потому, что вы выполнили это setstate в самом первом вызове и, будучи асинхронным по своей природе, ваши данные обновляются в первую очередь
В строке 3 вместо «ничего» вернуть return response.json() (undefined).
Обновлять:
const toJson = response => response.json()
fetch(req)
.then(toJson)
.then(json => {
this.setState(() => {
return {
data: json
}
})
return json
})
.then((json) => {
console.info(json)
const promises = json.meals.map((obj) => {
let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
let req = new Request(url, {
method: 'GET',
headers: header
})
return fetch(req)
.then(toJson)
.then((json) => {
console.info(json);
this.setState((prevState) => ({
recipe: prevState.recipe.push(json)
}))
})
})
return Promise.all(promises)
})
.then(() => {
console.info('job done')
})
Вам нужно отобразить свой массив на обещания. Затем используйте Promise.all, чтобы дождаться их разрешения.
В скобках отсутствовали:
this.setState((prevState)=>{
recipe: prevState.recipe.push(json)
})
Замечание: все это нужно отредактировать. Вы не уйдете далеко с этим стилем кода / сложностью кода.
это синтаксис возврата, если есть только один оператор
я получаю эту ошибку: prevState.recipe.push is not a function и этот Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Это означает, что вы вызываете fetch не из того места. Вызовите его с крючка componentDidMount.
* очень вероятно
Я создал родительский компонент, чтобы решить эту проблему. Код был определенно сложным, и я сам запутался. Спасибо за вашу помощь!
Это ад обратного вызова, пожалуйста, найдите Обещающие гонки и проверьте метод обещания все().
Выполните свое обещание и позвоните снова