I'm consuming an API using Axios in React, but when i come to set the response in a State so I may use the data, it is undefined. The funny thing is, if I put console.log inside Get.js I see the array perfectly. Am I returning the value the wrong way ?
PS: When I use console.log inside the Get.js,inside the 2nd .then, it prints two times the array. Why ?
MainPage.jsx
import { useEffect, useState } from 'react';
import { axiosGet } from '../../services/Get';
import { Header } from '../../components/Header/';
import { Welcome } from '../../components/Welcome/';
export const MainPage = () => {
const [data, setData] = useState([]);
useEffect(() => {
console.log(axiosGet());
setData(axiosGet());
}, []);
return (
<>
<Header />
<Welcome />
{data.length &&
data.map(obj => {
<p key={obj.id}>obj.name</p>;
})}
</>
);
Get.js
import axios from 'axios';
export function axiosGet() {
axios
.get(
`https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
)
.then(res => {
return res.data.results;
})
.then(arr => {
return arr;
})
.catch(err => {
console.error('oops! error: ' + err);
});
}
if I change the Get.js code at this piece of code:
.then(res => {
return res.data.results;
})
.then(arr => {
console.log(arr)
return arr;
})
I got this:
Array(20) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { slug: "forza-horizon-5", name: "Forza Horizon 5", playtime: 11, … }
1: Object { slug: "call-of-duty-modern-warfare", name: "Call of Duty: Modern Warfare (2019)", playtime: 0, … }
2: Object { slug: "resident-evil-village", name: "Resident Evil: Village", playtime: 16, … }
3: Object { slug: "assassins-creed-valhalla", name: "Assassin's Creed Valhalla", playtime: 0, … }
4: Object { slug: "genshin-impact", name: "Genshin Impact", playtime: 0, … }
5: Object { slug: "mafia", name: "Mafia: Definitive Edition", playtime: 9, … }
6: Object { slug: "superhot-mind-control-delete", name: "SUPERHOT: MIND CONTROL DELETE", playtime: 2, … }
7: Object { slug: "valheim", name: "Valheim", playtime: 11, … }
8: Object { slug: "it-takes-two-2", name: "It Takes Two", playtime: 11, … }
9: Object { slug: "deep-rock-galactic", name: "Deep Rock Galactic", playtime: 6, … }
10: Object { slug: "risk-of-rain-2", name: "Risk of Rain 2", playtime: 7, … }
11: Object { slug: "tell-me-why", name: "Tell Me Why", playtime: 2, … }
12: Object { slug: "factorio", name: "Factorio", playtime: 17, … }
13: Object { slug: "ghostrunner", name: "Ghostrunner", playtime: 4, … }
14: Object { slug: "marvels-avengers", name: "Marvel’s Avengers", playtime: 14, … }
15: Object { slug: "mafia-iii-definitive-edition", name: "Mafia III: Definitive Edition", playtime: 0, … }
16: Object { slug: "guardians-of-the-galaxy", name: "Marvel's Guardians of the Galaxy", playtime: 8, … }
17: Object { slug: "need-for-speed-heat", name: "Need for Speed Heat", playtime: 3, … }
18: Object { slug: "marvels-spider-man-miles-morales", name: "Marvel's Spider-Man: Miles Morales", playtime: 0, … }
19: Object { slug: "streets-of-rage-4", name: "Streets of Rage 4", playtime: 4, … }
length: 20
<prototype>: Array []
Get.js:12:15
The function axios.get() returns a Promise of the data you want.
You need to modify your code to return this promise to the calling function:
export function axiosGet() {
return axios
.get(
`https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
)
And then you need to await for an answer (to go from a Promise to the data):
useEffect(async () => {
console.log(await axiosGet());
setData(await axiosGet());
}, []);
The problem is that axiosGet doesn't actually return anything.
You can't though get it to directly return the API data, since that is only retrieved asynchronously. See this question for lots of discussion as to how to get the response from asynchronous requests and use it in your code.
In your case probably the easiest solution is to have axiosGet return the promise that axios.get (and your subsequent .then calls from it) gives you, and then await that in your useEffect so that you can set the state in your component to it.
So I would make the following changes:
First add the return statement to axiosGet:
export function axiosGet() {
return axios
.get(
`https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
)
.then(res => {
return res.data.results;
})
.then(arr => {
return arr;
})
.catch(err => {
console.error('oops! error: ' + err);
});
}
and adjust the useEffect in your component as follows:
useEffect(async () => {
const apiData = await axiosGet();
setData(apiData);
}, []);
Related
I'm trying to pull out specific fields from backend data to prep the body of a table. The data coming in has the structure of:
[
{
_id: "63056cee252b83f4bc8f97e9",
goals: [
{ title: "Cook" },
{ title: "Budget" }
],
visitEnd: "2022-08-18T00:30:00.000Z",
visitStart: "2022-08-17T21:30:00.000Z",
},
{
_id: "63223586798c6b2658a0d576",
goals: [
{ title: "Cook" },
{ title: "Budget" },
{ title: "Clean" }
],
visitEnd: "2022-09-13T00:30:00.000Z",
visitStart: "2022-09-12T22:00:00.000Z"
},
{
_id: "63542ecfca5bd097a0d9acaf",
goals: [
{ title: "Cook" },
{ title: "Clean" }
],
visitEnd: "2022-10-12T19:00:11.000Z",
visitStart: "2022-10-12T17:00:00.000Z",
}]
Since the table headers are by month/year, I'm using lodash to group them by month, which gets me here:
Object { 7: (2) […], 8: (2) […], 9: (2) […] }
7: Array [ {…}, {…} ]
0: Object { user: "62410a1dcaac9a3d0528de7a", location: "Firm Office in LA", visitStart: "2022-08-17T21:30:00.000Z", … }
1: Object { user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-08-11T21:00:57.000Z", … }
length: 2
<prototype>: Array []
8: Array [ {…}, {…} ]
0: Object { user: "62410a1dcaac9a3d0528de7a", location: "Home", visitStart: "2022-09-12T22:00:00.000Z", … }
1: Object { user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-09-21T21:00:00.000Z", … }
length: 2
<prototype>: Array []
9: Array [ {…}, {…} ]
0: Object { user: "62410a1dcaac9a3d0528de7a", location: "Home", visitStart: "2022-10-12T17:00:00.000Z", … }
1: Object { user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-10-21T21:00:00.000Z", … }
length: 2
But now I'm stuck since I want to isolate the fields of the goals array, which is within the objects, within the array of each month, which is contained in an object. I've tried playing around with Object.keys and maps, and then from here: https://dev.to/flexdinesh/accessing-nested-objects-in-javascript--9m4 came across a function to get deeply nested items. But I'm still messing this up, and my head is spinning trying to make sense of it. I looked at lodash's map and property, but was not sure how to implement given the layers of nesting I'm trying to work through on dynamically named arrays within the groupBy object. Heres where I'm at, but I'm getting the error i.map is not a function
const sort = groupBy(visits, ({visitEnd})=> new Date(visitEnd).getMonth());
console.log("sort 1: ", sort)
const stage = Object.keys(sort).map((i) => {
{ i.map((el) => getNestedObject(el, ['goals', 'title'])) }
})
console.log("sort 2: ", stage)
My javascript knowledge is terrible which doesn't help...
The error you're getting, i.map is not a function, means that the variable i is not an array. Based on the data you supplied in your post i is an object.
Iterate the result of the sorted month/year data using Object.entries() versus Object.keys().
To get a list of unique goals per month with output that looks like:
{
7: ["Cook", "Spend", "Clean"],
8: ["Cook", "Budget", "Clean"],
9: ["Cook", "Budget", "Scrub", "Fold", "Rest", "Wash"]
}
const dataSortedByMoYrObj = {
7: [
{
user: "62410a1dcaac9a3d0528de7a", location: "Firm Office in LA", visitStart: "2022-08-17T21:30:00.000Z",
goals: [
{ title: "Cook" },
{ title: "Spend" },
{ title: "Clean" }
]
},
{
user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-08-11T21:00:57.000Z",
goals: [
{ title: "Cook" },
{ title: "Clean" }
]
}
],
8: [
{
user: "62410a1dcaac9a3d0528de7a", location: "Home", visitStart: "2022-09-12T22:00:00.000Z",
goals: [
{ title: "Cook" },
{ title: "Budget" },
{ title: "Clean" }
]
},
{ user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-09-21T21:00:00.000Z" }
],
9: [
{
user: "62410a1dcaac9a3d0528de7a", location: "Home", visitStart: "2022-10-12T17:00:00.000Z",
goals: [
{ title: "Cook" },
{ title: "Budget" },
{ title: "Scrub" }
]
},
{
user: "62410a1dcaac9a3d0528de7a", location: "place", visitStart: "2022-10-21T21:00:00.000Z",
goals: [
{ title: "Fold" },
{ title: "Rest" },
{ title: "Wash" }
]
}
]
};
// 'const getNestedObject' code sourced from:
// https://dev.to/flexdinesh/accessing-nested-objects-in-javascript--9m4
const getNestedObject = (nestedObj, pathArr) => {
return pathArr.reduce((obj, key) =>
(obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}
const goalsByMonthYearObj = {};
Object.entries(dataSortedByMoYrObj).forEach(([month, users]) => {
// 'month' represents the key.
// 'users' is an array of objects listed for each month.
let goalsByMonth = [];
users.map(user => {
const goalsProp = getNestedObject(user, ['goals']);
// Check if the 'goals' property is a valid.
// If 'goals' property is 'null' or 'undefined',
// '!Array.isArray(null)' returns 'true'.
if (!Array.isArray(goalsProp)) { return; }
// Convert list of goal objects (e.g. '{title: Budget}')
// to an array using 'goalsProp.map()' and then
// concatenate goals array to the existing
// goals-by-month array.
goalsByMonth = goalsByMonth.concat(goalsProp.map(goal => goal.title));
});
// Add array of unique goals for each month
// https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates
goalsByMonthYearObj[month] = [...new Set(goalsByMonth)];
});
console.log(goalsByMonthYearObj);
(Original code that's not as concise as above snippet.)
const goalsByMonthYearObj = {};
// Reference to 'Object.entries()' at:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
for (const [key, value] of Object.entries(dataSortedByMoYrObj)) {
// 'key' represents a month index.
// 'value' contains an array of objects listed for each month index.
//console.log(`${key}: ${value}`);
const goalsByMonth = [];
value.forEach(item => {
// The 'goals' property is only one level deep so
// it's not necessary to use the 'getNestedObject()'
// function.
// For example: const goalsProp = item.goals;
// The function is useful for more deeply
// embedded properties.
const goalsProp = getNestedObject(item, ['goals']);
if (!Array.isArray(goalsProp)) { return; }
goalsProp.forEach(goal => {
if (!goal.title) { return; }
goalsByMonth.push(goal.title);
});
});
// https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates
const uniqueGoals = [...new Set(goalsByMonth)];
goalsByMonthYearObj[key] = uniqueGoals;
}
console.log(goalsByMonthYearObj);
I am trying to get a specific team data from the database and store it in a state. But when I map an array inside that data it returns an error. When I console log my state it returns the data below
createdAt: "2021-03-19T13:36:22.868Z"
gameEvent: "basketball"
players: Array(5)
0: {_id: "605ea59c5cdf492b48987107", name: "Jerry Ale", jerseyNumber: "12"}
1: {_id: "605ea59c5cdf492b48987108", name: "Judel Agur", jerseyNumber: "14"}
2: {_id: "605ea59c5cdf492b48987109", name: "qwe", jerseyNumber: "12"}
3: {_id: "605ea59c5cdf492b4898710a", name: "qwe", jerseyNumber: "12"}
4: {_id: "605ea59c5cdf492b4898710b", name: "qwe", jerseyNumber: "12"}
length: 5
__proto__: Array(0)
teamName: "Balilihan"
updatedAt: "2021-03-27T03:25:16.148Z"
__v: 0
_id: "6054a8d63fec5c24389624ac"
I have an useEffect to gather this;
useEffect(() => {
const getTeam = async () => {
try {
const { data } = await fetchContext.authAxios.get('get-all-teams');
setIsLoaded(true);
if (isLoaded === true) {
setCurrentTeam(data.find((team) => team._id === row._id));
}
} catch (err) {
console.log(err);
}
};
getTeam();
}, [fetchContext, row, isLoaded]);
and I map the players array in a new variable because I want a controlled inputs for my form because I am updating the data. I am using Formik by the way
let playersOfTeam = currentTeam.players.map((player, index) => [
{
name: player.name,
jerseyNumber: player.jerseyNumber,
},
]);
But when I just get a specific value like the teamName it returns the teamName and when I console log currentTeam.players it returns what I expected to get. I am confused why I get this kind of error
Your data is undefined when the component is first mounted. This is because useEffect runs after render.
So adding a null check is the solution. Personally I prefer optional chaining. Simply change to:
let playersOfTeam = currentTeam?.players?.map((player, index) => [
{
name: player.name,
jerseyNumber: player.jerseyNumber,
},
]);
Is it at all possible to update the object's properties with setState?
Something like:
this.state = {
audit: { name: "1", age: 1 },
}
I can log the event to the console using:-
myContract.once('MyEvent', {
filter: {myIndexedParam: [20,23], myOtherIndexedParam: '0x123456789...'}, // Using an array means OR: e.g. 20 or 23
fromBlock: 0
}, function(error, event){ console.log(event); });
my solidity ABI object created on console is
App.js:42
{logIndex: 0, transactionIndex: 0, transactionHash: "0x94f6d8671988ceb8ef1da862257637a198f4afefc3aef6cf3eb992dfcafb0eb1", blockHash: "0xd26937f8535a335663c9af57335f7cc783aba0e9e376408cbb92c1b3f1b28166", blockNumber: 20, …}
logIndex: 0
transactionIndex: 0
transactionHash: "0x94f6d8671988ceb8ef1da862257637a198f4afefc3aef6cf3eb992dfcafb0eb1"
blockHash: "0xd26937f8535a335663c9af57335f7cc783aba0e9e376408cbb92c1b3f1b28166"
blockNumber: 20
address: "0x20B40e09b75a21E0B857F695dE5De92a5A5b5AD0"
type: "mined"
id: "log_0d967aac"
returnValues: Result
0: "1"
1: "bhavin"
2: "masterpiece"
3: "1000000000000000000"
4: "100"
5: "200"
6: "blah blah blah!!"
7: "0x04f78093E2a1C07BF6c4527Aaa00807d3132A1Df"
8: false
id: "1"
Artistname: "bhavin"
Artname: "masterpiece"
price: "1000000000000000000"
width: "100"
height: "200"
Description: "blah blah blah!!"
owner: "0x04f78093E2a1C07BF6c4527Aaa00807d3132A1Df"
purchased: false
__proto__: Object
event: "Artworkcreated"
signature: "0xf912339172a3b7eda9cb10ecdef181d10a74fc4411fe5d7e62f550ef3698d845"
raw: {data: "0x000000000000000000000000000000000000000000000000…16820626c6168212100000000000000000000000000000000", topics: Array(4)}
__proto__: Object
I need to setState the required data and use it later so I am using .setState like this
showusingID(ids){
this.setState({ loading: true })
this.state.instance.events.Artworkcreated({
filter: { id: ids},
fromBlock: 0,
}).on('data', function(event){
this.setState({...this.state.audit, name: 'someothername'});
})
}
but it showing
.setState is not a function.
Use arrow function in on('data').
showusingID = ids => {
this.setState({ loading: true })
this.state.instance.events.Artworkcreated({
filter: { id: ids},
fromBlock: 0,
}).on('data', event => {
this.setState({...this.state.audit, name: 'someothername'});
})
}
Currently I have a reactjs function that simply queries a pouchDB document, gets 7 records and then I'm trying to flatten those records in order to store in state. The problem is that, right now when I console.log docCalories I get this:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {caloriesBurned: "5345", createdAt: "2020-03-28T05:15:24.369Z"}
1: {caloriesBurned: "1234", createdAt: "2020-03-28T10:39:16.901Z"}
2: {caloriesBurned: "1122", createdAt: "2020-03-28T10:32:03.100Z"}
3: {caloriesBurned: "1234", createdAt: "2020-03-28T05:16:54.846Z"}
4: {caloriesBurned: "1234", createdAt: "2020-03-28T10:21:31.092Z"}
5: {caloriesBurned: "1234", createdAt: "2020-03-28T05:08:00.791Z"}
6: {caloriesBurned: "1234", createdAt: "2020-03-28T05:07:35.940Z"}
length: 7__proto__: Array(0)
but I want to get something that looks like this:
map: [5345,1234,1122,1234,1234,1234,1234]
So basically one object that contains the 7 numbers from each doc's caloriesBurned value
What am I doing wrong here and how can I properly put these into one array/object?
setMax = () => {
this.state.caloriesDB.db.find({
selector: {
$and: [
{_id: {"$gte": null}},
{caloriesBurned: {$exists: true}},
{createdAt: {$exists: true}}
]
},
fields: ['caloriesBurned', 'createdAt'],
sort: [{'_id':'desc'}],
limit: 7
}).then(result => {
const newDocs = result.docs;
const docCalories = newDocs.map((caloriesBurned) => caloriesBurned)
console.log('this is map');
console.log(docCalories);
}).catch((err) =>{
console.log(err);
});
}
You're returning the entire object in your map function, instead you should only send the caloriesBurned property.
const docCalories = newDocs.map((data) => data.caloriesBurned)
or if you like, we can destructrure data and have
const docCalories = newDocs.map(({caloriesBurned}) => caloriesBurned)
What Dupocas has written in the comments is correct.
newDocs is a list of objects and with this code:
const docCalories = newDocs.map((caloriesBurned) => caloriesBurned)
you will just get another list that is just like newDocs. What you want to return from the map function is a specific key, so try:
const docCalories = newDocs.map(doc => doc.caloriesBurned)
considering docCalories value in m2 by creating map, you can do something like this -
const m2 = new Map(Object.entries([{
0: {
caloriesBurned: "5345",
createdAt: "2020-03-28T05:15:24.369Z"
}
},
{
1: {
caloriesBurned: "1234",
createdAt: "2020-03-28T10:39:16.901Z"
}
},
{
2: {
caloriesBurned: "1122",
createdAt: "2020-03-28T10:32:03.100Z"
}
},
{
3: {
caloriesBurned: "1234",
createdAt: "2020-03-28T05:16:54.846Z"
}
},
{
4: {
caloriesBurned: "1234",
createdAt: "2020-03-28T10:21:31.092Z"
}
},
{
5: {
caloriesBurned: "1234",
createdAt: "2020-03-28T05:08:00.791Z"
}
},
{
6: {
caloriesBurned: "1234",
createdAt: "2020-03-28T05:07:35.940Z"
}
}
]))
var store = [];
Array.from(m2).map(([key, value]) => store.push(value[key].caloriesBurned));
console.log(store);
I'm creating a user role management form like this:
Whenever the user checks or unchecks a permission, I'm trying to put that in the state so that I can send it to my backend server and update the DB.
I'm storing all the rows info in the state in componentWillReceiveProps:
componentWillReceiveProps(nextProps){
if(nextProps.users.items){
this.setState({
userobj : nextProps.users.items['users']
});
const userarr = []
nextProps.users.items['users'].map((i) => {
userarr.push({"employeeid" : i['employeeid'] , "isadmin": i['isadmin'], "isreports" : i['isreports'], "ischarts": i['ischarts'], "ischathistory": i['ischathistory']})
});
this.setState({"list" : userarr});
}
}
Now the state is:
list: Object(4)
0: Object { employeeid: "12345", isadmin: false, isreports: true, … }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
There is an onClick event for each checkbox:
<Table.Td>{rows['isadmin'] ? <Checkbox id={rows['employeeid']} name="isadmin" defaultChecked onChange={this.handleChange}></Checkbox> : <Checkbox id={rows['employeeid']} name="isadmin" onChange={this.handleChange}></Checkbox>}</Table.Td>
And this is the code for handleChange:
handleChange(id) {
const checked = id.target.checked;
const empid = id.target.id;
const name = id.target.name;
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
}
The result is:
list: Object(4)
0: Object { isadmin: true }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
What I need to achieve is:
list: Object(4)
0: Object { employeeid: "12345", isadmin: true, isreports: true, … }
1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
3: {…}
I'm new to React and Redux. Any help is appreciated. Thanks in advance. ☺
Replace this:
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
With this:
this.setState(prevState => ({
list: {
...prevState.list,
[this.getIndex(empid, this.state.list, 'employeeid')]: {
...prevState.list[this.getIndex(empid, this.state.list, 'employeeid')],
[name] : checked
},
}
}));
try updating your handleChange method to this
handleChange(id) {
const checked = id.target.checked;
const empid = id.target.id;
const name = id.target.name;
this.setState(prevState => ({
let list = prevState.list
let user = prevState.list.filter(user => user.employeeid == id)
const userIndex = prevState.list.indexOf(user)
user = {
...user,
isadmin: true
}
list.splice(userIndex, 1) //remove the old user
list.splice(userIndex, 0, user) //put the updated user at same index
this.setState({list})
}));
}