I think I may running into a callback hell type scenario or this may be an issue with scope. I want setState with allLeagues array once the .map function is finished running. Problem is, when the .map function is done and this.setState({leagueAL: allLeagues)} is ran, the state is set to an empty array. I do not want to run this.setState inside the .map and set it multiple times. Any thoughts on how I can make the data persist into the state?
getLeagueMatches = () => {
let allLeagues = []
if(this.state.leagueMatchesInfo != null){
this.state.leagueMatchesInfo.map((league, id) => {
let leagueID = league.league_id;
fetch(`https://apifootball.com/api/?action=get_events&from=2017-09-11&to=2017-09-11&league_id=${leagueID}&APIkey=<APIKey>`)
.then(res => res.json())
.then(event => {
//console.log(event)
if(event.error){
//console.log(event.error)
}else{
league.matches = true;
//console.log(league)
allLeagues = [...allLeagues, league]
}
})
console.log(allLeagues)
})
this.setState({
leagueAL: allLeagues
})
}//end if(65)
};//end renderItem
.map() returns a new array. You'll need to catch it in a variable. In map, you should have a function that does something on each element.
allLeagues = this.state.leagueMatchesInfo.map((league, id) => {
...
}
this.setState({
leagueAL: allLeagues
})
Then setState after the map.
The issue is that you're not updating the allLeagues array until the promises have resolved. However, setState is being called before any of this even happens.
I would look into something like Promise.all(). Then you can create an array of promises with each call to fetch. Then you can call .then off your Promise.all() and set the state within the .then.
Related
My GraphQL backend returns data in the form:
{
data: {
feed: {
A: [...],
B: [...]
}
}
}
Where my frontend merges A and B using a sort on some field present within the data, and then uses React Native's FlatList to display them as a single array. I'm using Apollo client to query my backend like so:
const { fetchMore, loading, data, error } = useQuery(fetchQuery, {variables: fetchArgs});
if (loading) {...}
if (error) {...}
let A = [];
let B = [];
if (data!.feed.A) A = data!.feed.A
if (data!.feed.B) B = data!.feed.B
let feedData = sortedMerge(A,B);
return (
<FlatList
data={feedData}
...
onEndReached{
//update fetchArgs
fetchMore({
variables: fetchArgs,
updateQuery: // Not sure if I need to do anything here?
}).then(result => {
// Maybe this is where I update?
})
}
)
However, I can't seem to figure out how or where to get the new data, say A' and B' merged and concatenated with feedData so that my FlatList can update as efficiently as possible?
I guess I'm having trouble because I can't just directly update the list and need to do a little bit of preprocessing, but no matter where I update feedData, either in the then block after fetchMore or outside of it, the FlatList never seems to update.
Try putting your merge logic in a useMemo:
const { fetchMore, loading, data, error } = useQuery(fetchQuery, {variables: fetchArgs});
const feedData = useMemo(() => {
if (data) {
const { A, B } = data.feed;
return sortedMerge(A,B);
} else return [];
},[data]);
if (loading) {...}
if (error) {...}
return (
<FlatList
data={feedData}
...
onEndReached = {() => fetchMore({ variables: fetchArgs })}
/>
)
Executing fetchMore should cause data to be updated which will trigger the useMemo and update your feedData variable.
However you'll still need to merge the paginated results into the client-side cache.
I am currently working with a API that does not return JSON. To get around this, I take the response and push it to a array ( while formatting it to remove any indentation and split each number in the response ). I then use this array of 183 numbers and run a for loop against an array with 183 characters to generate an object ( with custom key value pairs ) from the response.
Where things get confusing is when I start to use the data in my HTML. Usually you can just say <p>{data.overallRank}</p> but I am getting the error that the object is undefined. This makes sense because the data = {} was not created until the function ran.
After searching for a solution, I cam across svelte await blocks. You can read on them here and look at the tutorial : https://svelte.dev/tutorial/await-blocks
After trying to implement this feature, I have the following code.
let playerStats = []
let proxy = "https://cors-anywhere.herokuapp.com/"
let url = proxy + "https://secure.runescape.com/m=hiscore_oldschool/index_lite.ws?player=Hess"
const data = {};
let promise = getPlayer();
async function getPlayer() {
return await fetch(url).then((response) => response.text())
.then((data) => {
return data;
});
}
getPlayer().then((playerData) => {
// format data
playerStats.push(playerData.replace(/\n/ig, ",").split(','));
console.log(playerStats);
// Begin object generation
// names array shortened
let names = ["overallRank", "overallLvl", "overallXP", "attRank", ]
const data = {};
for (var i = 0; i < playerStats[0].length; i++) {
data[names[i]] = playerStats[0][i];
}
console.log(data);
});
<main>
{#await promise}
<p>Search for a Player...</p>
{:then data}
<p>The data is {data}</p>
{/await}
</main>
I suggest throwing this code in a svelte editor which you can find here: https://svelte.dev/tutorial/await-blocks
The issue with this code is that it is printing out the data from the return data, which returns the unformatted data and not the object.
I want to return the object that is created after the second function getplayer().then()... so I can use that object throughout my HTML.
I hope I explained things well and thank you in advance for any help.
It is returning the formatted data because that what is returned by the promise function. In order to get the formatted data, you have to add the formatting to the chain of promise
async function getPlayer() {
return await fetch(url)
.then((response) => response.text())
.then((playerData) => {
// here your transformation
// do not forget to actually return something
return data;
});
You were actually very close to sorting it out, just a bit of confusion regarding how promises work I believe.
All you need to do is format your data within the block where the data is handled following the fetch & decode operations:
async function getPlayer() {
return await fetch(url)
.then((response) => response.text())
.then((data) => {
return formatData(data);
});
}
Your formatData() function is essentially there already, you just need minor changes in your code:
function formatData(playerData) {
playerStats.push(playerData.replace(/\n/ig, ",").split(','));
console.log(playerStats);
// Begin object generation
// names array shortened
let names = ["overallRank", "overallLvl", "overallXP", "attRank", ]
const data = {};
for (var i = 0; i < playerStats[0].length; i++) {
data[names[i]] = playerStats[0][i];
}
console.log(data);
return data;
}
Finally, you do not need to explicitly declare a promise to use it in an {#await} block, you know getPlayer() returns a promise, so you can directly use that instead:
<main>
{#await getPlayer()}
<p>Search for a Player...</p>
{:then data}
<p>Overall Rank: {data.overallRank}</p>
{/await}
</main>
See functioning REPL
How can I store the recipe name from this api call into a state variable or some other variable to be used further down in the render
{
this.props.recipeList.recipeList.filter((recipe) => recipe.recipeName === search).map(recipe => {
return <Recipe
name={recipe.recipeName}
numberOfServings={recipe.numberOfServings}
key={'recipe-' + recipe.recipeId}
/>
})
}
As this is performed within render, avoid modifying the component state.
I would recommend declaring a variable at the top of your render method and then assigning it in your map call. This, of course, assumes that filter will only ever return a single result.
Something like:
render() {
let name;
....
{
this.props.recipeList.recipeList.filter((recipe) => recipe.recipeName === search).map(recipe => {
name = recipe.recipeName; // this bit
return <Recipe
name={recipe.recipeName}
numberOfServings={recipe.numberOfServings}
key={'recipe-' + recipe.recipeId}
/>
})
}
....
Looking to add some items, display a list then be able to delete each item separately, my understanding of this problem is that I have to create an array then update it each time I want to delete an item then save. That seems quite complex for a basic db operation, I tried several approachs don't know if my code is what I'm supposed to do. Can someone please point to the right direction?
The last error I'm facing:
Object is null or undefined from
C:\Users\oled\stock\node_modules\react-native\Libraries\polyfills\Array.es6.js:24:26
_toConsumableArray
FetchValue = () => {
AsyncStorage.getItem("Favorites").then((value) => {
this.setState({
favs: JSON.parse(value)
});
}).done();
};
SaveValue = () => {
const newFavs = [...this.state.favs, this.state.UserInput];
this.setState({ favs: newFavs, UserInput: '' }, () => {
AsyncStorage.setItem("Favorites", JSON.stringify(this.state.favs));
Keyboard.dismiss()
});
};
RemoveValue(item){
const index = this.state.favs.indexOf(item);
const newArray = [...this.state.favs];
newArray.splice(index,1);
this.setState({ favs: newArray });
AsyncStorage.setItem("Favorites", JSON.stringify(newArray));
}
Full code : https://pastebin.com/p7sbQTNG
I think after removing last element, your array is empty. So after that whenever you try to remove the value from array it will give you the error. So please check the condition where array count is greater than 0 or not.
I hope it will work for you.
replace your RemoveValue method with this code.
We need to check if the item is not null/undefined
RemoveValue(item){
if(item !== null && item !== undefined){
const index = this.state.favs.indexOf(item);
const newArray = [...this.state.favs];
newArray.splice(index,1);
this.setState({ favs: newArray });
AsyncStorage.setItem("Favorites", JSON.stringify(newArray));
}
this will resolve your crash.
I am trying to work with the youtube API.
In order to get the icons for the first nth videos I have to make a request.
I was thinking to make a for loop and inside that loop there would be the request.
The problem with this approach is that I am getting the responses with the wrong order and completely random.
So my question :
is there a way to make a for loop wait for a response? I am also able to work with the RxJS operators but I don't know what I should search for
Thanks in advance
You could leverage the Observable.forJoin method. In this case, the "global" callback will be called when all requests have ended.
Here is a sample:
Observable.forkJoin([
this.http.get('/req1').map(res => res.json()),
this.http.get('/req2').map(res => res.json()),
(...)
]).subscribe(results => {
// Called when all requests have ended
var result1 = results[0];
var result2 = results[1];
(...)
});
In your particular use case, you can leverage in addition the flatMap operator:
this.http.get('/videos').map(res => res.json())
.flatMap(videos => {
return Observable.forkJoin(videos.map((video) => {
return this.http.get(`/video/${video.id}/icon`)
.map(res => res.json());
});
}).subscribe(results => {
// all icons received here
});
So I ended up using something like this.
searchVideo( videoIdArray ) {
let observableBatch = [];
let data;
let i;
let videosTempArray: Array<Video>=[];
for(i=0;i<videoIdArray.length;i++){
let videoTemp: Video= {};
videosTempArray.push(videoTemp);
}
videosTempArray.forEach(( videoTemp, key ) => {
observableBatch.push( this.http.get(BASE_URL_VIDEO + '?part=statistics%2Csnippet' + '&id=' + videoIdArray[key].videoId + '&key=' + API_TOKEN)
.map((res: Response) => {
res.json();
// console.log(key);
data = res.json();
videosTempArray[key].channelId=data.items[0].snippet.channelId;
videosTempArray[key].tags=data.items[0].snippet.tags;
videosTempArray[key].views=data.items[0].statistics.viewCount;
videosTempArray[key].likes=data.items[0].statistics.likeCount;
videosTempArray[key].dislikes=data.items[0].statistics.dislikeCount;
return videosTempArray[key];
}
)
);
});
return Observable.forkJoin(observableBatch);
}
thanks for the help!!!