const [arrUserID, setArrUserID] = useState([])
const fetchUser = async () => {
try {
const owner = await axios({
url: `${baseUrl}/addcryptos/owner/${userid}`,
method: 'get'
})
const { events } = owner.data
for (let i = 0; i < events.length; i++) {
const reducer = (accumulator, curr) => accumulator + curr;
setArrUserID(arrUserID.push(events[i].id)) // return id of 'events' in array [1, 1027, 1027, 3087]
console.log(arrUserID.toString()) // return 1,1027,1027,3087
}
}
catch (err) {
console.log(err)
}
}
const problem = useEffect(() => {
(async () => {
if (arrUserID.toString() !== '')
try {
const data = await axios({
url: `http://myurl/yes?id=${arrUserID.toString()}`,
method: 'get'
})
console.log(arrUserID) //THERE IS A PROBLEM -> return 4 because my array length is 4 but it's expected to be "1,1027,1027,3087"
} catch (error) {
console.log(error)
}
})();
}, []);
so i don't understand why when i console.log my "arrUserID" is one time = [1027, 1, 453 ....] and one time egal to array.length ?
if somebody know what is the problem that would be great beacause i don't have any idea
thanks
the way to set a new state for an array is through spread syntax.
When you do:
setArrUserID(arrUserID.push(events[i].id))
you're setting the value of arrUserId to be the 4 because .push() returns the new length of the array, see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
Try doing:
setArrUserID([...arrUserId, events[i].id])
Related
Below is a code i am using to set state for some data:
const [loader, setLoader] = useState(true);
const [trendData, setTrend] = useState([]);
const [thisMonthData, setThisMonth] = useState([]);
useEffect(() => {
graphData();
}, [loader]);
async function graphData() {
await getRequest(process.env.REACT_APP_apiUrl + ':0000/abc/xyz').then( (response) => {
let series = [];
let months;
for (let index = 0; index < response.length; index++) {
months = response[index]['Month'].split(',');
series.push(response[index]['Useres'].split(','));
}
setTrendMonth(series);
setThisMonthData(series);
console.log(thisMonthData);
setLoader(false);
});
}
And now i am attaching a response getting in console.log(thisMonthData); this. I have tried everything, including thisMonthData in useEffect and other state keys. But everytime data is going blank or missing values.
Whats wrong here.
enter image description here
enter image description here
You are mixing await and then, also try to log thisMonthData when they are changed with a useEffect:
useEffect(() => {
graphData();
}, [loader]);
useEffect(() => {
console.log(thisMonthData);
}, [thisMonthData]);
async function graphData() {
try {
const response = await getRequest(
process.env.REACT_APP_apiUrl + ':0000/abc/xyz'
);
let series = [];
let months;
for (let index = 0; index < response.length; index++) {
months = response[index]['Month'].split(',');
series.push(response[index]['Useres'].split(','));
}
setTrendMonth(series);
setThisMonthData(series);
setLoader(false);
} catch (err) {
console.log(err);
}
}
Hi Sandeep Singh,
Does the function getRequest() use axios or already does the .json() in some step? Like in the ex:
fetch(myRequest)
.then((response) => response.json())
.then((data) => {/***/}
I am trying to call a function that calls fetch to an API from a React component in a separate file and am not finding the correct solution to get the correct response back.
When I debug, the result returns before the updateAccount function has completed and the final result is never returned to my update function.
Inside the fetch, the API returns the correct response whether it is successful or has validation errors and those results are correctly assigned to result.success and result.errors but the result doesn't get returned from the function so that the caller can make use of those values.
Inside of my React component:
import { updateAccount } from '../services/requests';
...
const update = (account: EditAccountModel) => {
const result = updateAccount(account);
if(result.errors.length > 0) {
// will notify of errors
console.log(result.errors); // is an empty array instead of validation errors
} else {
// will notify of success
console.log(result.success); // is an empty string instead of success message
}
}
...
My request file
export const updateAccount = (account: EditAccountModel | undefined): EditAccountResponseModel => {
const result = new EditAccountResponseModel();
fetch(baseUrl, {
method: 'PUT',
body: JSON.stringify(account),
headers
})
.then(response => {
if (!response.ok) {
return Promise.reject(response);
}
result.success = `${account?.name} was updated successfully!`
})
.catch(error => {
if (typeof error.json === "function") {
error.json().then(jsonError => {
result.errors.push(jsonError);
}).catch(genericError => {
result.errors.push(genericError);
});
}
});
return result;
}
The result reassignment happens inside then catch but it won’t be affective in the way you expected. The guaranteed way to return correct result is via a callback() passed to your updateAccount() if you could afford it:
export const updateAccount = (
account: EditAccountModel | undefined,
callback: Function
): EditAccountResponseModel => {
const result = new EditAccountResponseModel();
fetch(baseUrl, {
method: 'PUT',
body: JSON.stringify(account),
headers
})
.then(response => {
if (!response.ok) {
return Promise.reject(response);
}
result.success = `${account?.name} was updated successfully!`
callback(result);
})
.catch(error => {
if (typeof error.json === "function") {
error.json().then(jsonError => {
result.errors.push(jsonError);
callback(result);
}).catch(genericError => {
result.errors.push(genericError);
callback(result);
});
}
});
}
And inside your React component:
const update = (account: EditAccountModel) => {
const handleResult = (res) => {
// your result callback code
// ...
};
updateAccount(account, handleResult);
// ...
}
Alternative way that keeps your current structure is to change your current updateAccount() to an async function, then return await fetch().
You need to wait for the response . I'll let read more about how Promise work in JavaScript.
I wouldn't code updateAccount the same way you did, especially where you use the variable result and update it inside the flow of the promise (you really don't need that). You're also using React so you can use the state to store and update the result of the update function. But let's fix your problem first:
export const updateAccount = async (account: EditAccountModel | undefined): EditAccountResponseModel => {
const result = new EditAccountResponseModel();
await fetch(baseUrl, {
method: 'PUT',
body: JSON.stringify(account),
headers
})
.then(response => {
if (!response.ok) {
return Promise.reject(response);
}
result.success = `${account?.name} was updated successfully!`
})
.catch(error => {
if (typeof error.json === "function") {
error.json().then(jsonError => {
result.errors.push(jsonError);
}).catch(genericError => {
result.errors.push(genericError);
});
}
});
return result;
}
First make your function updateAccount async then await the result of the promise.
Now the same thing for the function update:
const update = async (account: EditAccountModel) => {
const result = await updateAccount(account);
if(result.errors.length > 0) {
// will notify of errors
} else {
// will notify of success
}
}
I am using React and inside useEffect I am pulling data but I am getting an emtpy array after all the promises are resolved and cannot figure out why.
Here is the code:
const data = mainnet.FairLaunch.pools.map((pool) => {
const loadingStakingData = async () => {
const stakedValue = await getStakeValue(pool);
const poolDaily = await getPoolDaily(pool);
console.log( { stakedValue, poolDaily }) // all good here and printing what it has to print
return { stakedValue, poolDaily };
};
return loadingStakingData();
});
Promise.all(data).then((values) => {
console.log('value', values) // not logging anything here
setStakingData(values);
}); // always an empty array
Any idea why this is happening?
You might be returning a pending promise in the map function. Maybe try this code instead to return the value
const data = mainnet.FairLaunch.pools.map(async (pool) => {
const stakedValue = await getStakeValue(pool);
const poolDaily = await getPoolDaily(pool);
console.log( { stakedValue, poolDaily }) // all good here and printing what it has to print
return { stakedValue, poolDaily };
});
Promise.all(data)
.then((values) => {
console.log('value', values)
setStakingData(values);
})
.catch(console.error) // Remember to catch errors!!!
I'm working on a React app, which connects to a firebase database. Part of the app reads in a list of Items belonging to the current User, and then reads a config object in for each one, and finally updates the items in state. I'm having trouble getting it to work - I seem to keep getting
My component is:
const Dashboard = () => {
const authUser = useContext(AuthUserContext);
const firebase = useContext(FirebaseContext);
const [error, setError] = useState<string|null>(null);
const [firebaseToken, setFirebaseToken] = useState<string|null>(null);
const [items, setItems] = useState<Array<ItemModel>>([]);
// On first render, get all Items
useEffect(() => {
if(!authUser) return;
if(!firebase) return;
let userId = authUser.id;
const getItems = () => {
firebase.doGetIdToken()
.then((token) => {
// Save token so it can be passed down
setFirebaseToken(token);
url = "items/" + userId;
Client.getData(url, token)
.then((itemResults:Array<ItemModel>) => {
// Get config for each Item
// Set up an empty array to hold the new data
const itemResultsWithConfigs:Array<ItemModel> = []
// Now get the config for each item
itemResults.forEach((item:ItemModel) => {
// Get config for this Item
url = "/items/config/" + item.id;
Client.getData(url, token)
.then((newConfig:ConfigModel) => {
let newItem:ItemModel = {
...item,
config: newConfig
}
// Add full item to list & update list
itemResultsWithConfigs.push(newItem);
})
})
setItems(itemResultsWithConfigs);
})
});
})
})
.catch(() => setError("Unable to connect to database"))
}
getItems();
}, [authUser, firebase])
return (
<>
<ul>
{
items.map((item:ItemModel) => {
return <li key={item.id}>{item.name}</li>
})
}
</ul>
</>
);
}
export default Dashboard;
Client.getData is:
async function getData(path:string, token:string) {
const object:AxiosRequestConfig = {
...obj,
method: 'GET',
headers: {
...obj.headers,
'Authorization': `Bearer ${token}`,
},
};
try {
const response:AxiosResponse = await axios.get(`${baseUrl}${path}`, object);
checkStatus(response);
const parsedResult = parseJSON(response);
return parsedResult;
} catch (error) {
throw error;
}
}
The problem is that the async function (getData) is returning at different times, therefore the array of items is being overwritten some of the time. Currently this is only rendering one or two of the items instead of the 3 that I know should be there.
How do I approach this?
Since itemResultsWithConfig is derived asynchronously, a good idea is to map and wait for all the promises to resolve using Promise.all
const getItems = () => {
firebase.doGetIdToken()
.then((token) => {
// Save token so it can be passed down
setFirebaseToken(token);
url = "items/" + userId;
Client.getData(url, token)
.then((itemResults:Array<ItemModel>) => {
// Get config for each Item
// Set up an empty array to hold the new data
// Now get the config for each item
let promises = itemResults.map((item:ItemModel) => {
// Get config for this Item
url = "/items/config/" + item.id;
return Client.getData(url, token)
.then((newConfig:ConfigModel) => {
let newItem:ItemModel = {
...item,
config: newConfig
}
return newItem;
})
})
Promise.all(promises).then((itemResultsWithConfigs:Array<ItemModel>) => setItems(itemResultsWithConfigs))
})
});
})
I'm calling an async function (getData()) in componentDidMount, and I'm trying to use this.setState with result of that function.
componentDidMount() {
let newData = getData();
newPodData.then(function (result) {
console.log('result', result)
this.setState({result})
})
}
However, I'm having issues getting my state to properly update. Some additional context - I'm trying to set my initial state with data I am receiving from a database. Is my current approach correct? What's the best way to accomplish this? Here's my async function for more context:
const getTeamData = async () => {
const getTeamMembers = async () => {
let res = await teamMemberService.getTeamMembers().then(token => { return token });
return res;
}
const getActiveTeams = async () => {
let res = await teamService.getActiveTeams().then(token => { return token });
return res;
}
const teamMemberResult = await getTeamMembers()
const activeTeamsResult = await getActiveTeams();
// get team member data and add to teamMember object
let teamMemberData = teamMemberResult.reduce((acc, curr) => {
acc.teamMembers[curr.id] = curr;
return acc;
}, {
teamMembers: {}
});
// get team ids and add to teamOrder array
let activeTeamsData = activeTeamsResult.map(team => team.id)
let key = 'teamOrder'
let obj = []
obj[key] = activeTeamsData;
const newObject = Object.assign(teamMemberData, obj)
return newObject;
}
export default getTeamData;
Changing the function inside the then handler to an arrow function should fix it. e.g:
componentDidMount() {
let newData = getData();
newPodData.then((result) => {
console.log('result', result)
this.setState({result})
})
}
But I'll like to suggest a better way to write that.
async componentDidMount() {
let result = await getData();
this.setState({result})
}