When I load todos from storage, I get this error. When I replace the loadDate() function with [] this error is not present, but then I cannot get the saved todos from the phone storage. Help me please.The problem may be related to the wrong procedure. I had this before I used useReduce()
const saveData = async () => {
await SecureStore.setItemAsync(STORAGE_KEY, JSON.stringify(state))
}
const loadData = async () => {
try {
const load = JSON.parse(await SecureStore.getItemAsync(STORAGE_KEY) || JSON.stringify([]))
if (load != null) {
return load
}
} catch (e) {
alert (e)
}
}
const [ state, dispatch ] = useReducer(reducer, loadData())
useEffect(() => {
saveData()
}, [state])
Related
I have my App component defined as below;
function App() {
const [state1, setState1] = useState({});
const [state2, setState2] = useState({});
const [isApiCallDone, setIsApiCallDone] = useState(false);
const fetchFn = useMyCustomFetch();
useEffect(() => {
(async function() {
try {
let [state11] = await fetchFn('api/api1', {}, 'GET');
let [state22] = await fetchFn('api/api2', {}, 'GET');
setState1(state11); // Is there a better way to set this ?
setState2(state22);
setIsApiCallDone(true);
} catch (e) {
console.error(e);
}
})();
}, []);
useEffect(() => {
if (Object.keys(state1).length > 0 && Object.keys(state2).length > 0) {
// Set some other state variables on App
}
}, [state1, state2])
return (
<>
<MyContextProvider>
{isApiCallDone && (
<MyComponent />
)
}
</MyContextProvider>
</>
}
Also my useMyCustomFetch hook looks like below
export default function useMyCustomFetch() {
const fetchData = async (url, reqData, reqType) => {
try {
var statusObj = {
statMsg: null
};
const response = await fetch(url, reqOptions);
if (!response.ok) {
throw response;
}
statusObj.status = "success";
const json = await response.json();
return [json, statusObj];
} catch (error) {
statusObj.status = "error";
return [null, statusObj];
}
}
return fetchData;
}
My questions are;
For the lines
let [state11] = await fetchFn('api/api1', {}, 'GET');
setState1(state11);
I first assign it to a new variable state11 and then assign the same by calling setState1.
Is there a better way to set the state1 directly?
Is the usage of async function inside the useEffect fine ?
For Question 1:
You can directly setState like below without using state11.
useEffect(() => {
(async function () {
try {
setState1(
(await fetchFn("https://reqres.in/api/users/1", {}, "GET"))[0]
); // Is there a better way to set this ?
setState2(
(await fetchFn("https://reqres.in/api/users/2", {}, "GET"))[0]
);
setIsApiCallDone(true);
} catch (e) {
console.error(e);
}
})();
}, []);
For Question 2:
I don't see any problem using async & IIFE in the useEffect. In fact I like the way its done. Looks good to me.
Please find screenshot of the state being set properly in the console (I have used a dummy api url):
If you don't want to use async functions, you can use the Promise.prototype.then() method to combine your calls like this :
useEffect(() => {
fetchFn('api/api1', {}, 'GET').then(state => {
setState1(state[0]);
return fetchFn('api/api2', {}, 'GET')
}).then(state => {
setState2(state[0]);
setIsApiCallDone(true);
}).catch(console.log);
}, []);
An other way to set this with an async function but more factorised is this way :
useEffect(() => {
(async function() {
try {
await fetchFn('api/api1', {}, 'GET')
.then(tab => tab[0])
.then(setState1);
await fetchFn('api/api2', {}, 'GET');
.then(tab => tab[0])
.then(setState2);
setIsApiCallDone(true);
} catch (e) {
console.error(e);
}
})();
}, []);
Finally, the usage of the async function in an useEffect is not a problem.
I create a hook that manages the state of a single object with fetch to api. This hook exposes function to interact with this object.
// the hook
const useMyHook = () => {
const [myObject, setMyObject] = useState(null);
useEffect(() => {
const fetchData = async () => {
const data = await fetchSomething();
setMyObject(data);
}
fetchData();
}, []);
const updateMyObject = async () => {
console.log(myObject); // log : { ... }
try {
console.log(myObject); // log : undefined
// ...
} catch(err) {
// ...
}
};
return {
updateMyObject,
myObject
};
};
Then i use this hook inside a component and trigger updateMyObject() with a button.
// the component
const MyComponent = () => {
const { myObject, updateMyObject } = useMyHook();
return (
<button onClick={updateMyObject}>
Click me
</button>
);
};
How is this possible that before the try catch block the log is clean and inside the block i get undefined ?
I think this gonna work
useEffect(() => {
const fetchData = async () => {
const data = await fetchSomething();
setMyObject(data);
}
If(!myObject)
fetchData();
}, [myObject]);
Your code is perfectly alright !! There could be a problem in the fetchSomething() method. Ideally, it should return data, but it's not doing the same job.
Here is a small example. You can give it a try.
const fetchSomething = async () => {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
).then((res) => res.json());
return response;
};
I have this working, when the user goes to this page, this line of code executes:
interface Badge {
id: string;
badge_name: string;
badge_description: string;
img64: string;
}
const [data, setData] = useState([] as any[]);
const [isPending, setisPending] = useState(true);
const [searchTerm, setSearchTerm] = useState("");
const onSearchChange = (e: any) => {
setSearchTerm(e.target.value);
};
const setDataWithImg = useCallback(async (badges: Badge[]) => {
let badgeWithImg: Badge[] = [];
const base64Flag = "data:image/png;base64,";
await Promise.all(
badges.map(async (badge: any) => {
const imgBuffer = badge.img_icon.data;
const imgBase64 = bufferToBase64(imgBuffer);
badge.imgBase64 = `${base64Flag}${imgBase64}`;
badgeWithImg.push(badge);
})
);
setData(badgeWithImg);
}, []);
const loadData = useCallback(async () => {
console.log("loadData");
try {
setisPending(true);
await BadgeService.loadData().then(
(res) => {
setDataWithImg(res.data);
setisPending(false);
},
(error) => {
setisPending(false);
}
);
} catch (err) {
console.log(err);
setisPending(false);
}
}, [setDataWithImg]);
useEffect(() => {
loadData();
}, [loadData]);
It will load the data from BadgeService.loadData and I have this function also that will search data from api, and this code will execute.
const onClickFilter = async (e: any) => {
e.preventDefault();
if (searchTerm === "") {
loadData();
} else {
try {
console.log("filterData");
setisPending(true);
await BadgeService.filterData({
badge_name: searchTerm,
}).then(
(res) => {
setDataWithImg(res.data);
setisPending(false);
},
(error) => {
setisPending(false);
}
);
} catch (err) {
console.log(err);
setisPending(false);
}
}
};
User has a search function and that code will execute, search function works fine, I want when user click filter with empty value in search, it will load the original loadData. I already tried console.log('Loaddata') to trace if my condition is working fine and it is ok, but when I check the network, it still executing the api call from filterData, not loadData
First load of the page:
When user fires search function:
Where user fires search function but empty search term:
Base on network logs:
The last request should be the badges only, not the with parameters..How I fix this? What Am I missing here?
Thank you!
Looking at your code, your if check in onClickFilter function seems wrong.
you can do something like
if(!searchTerm){
loadData();
}
Doing !searchTerm will return true for every "falsy" value (empty string, 0, null, false, undefined, NaN) whereas x == "" will only return true if x is null (or apparently undefined).
Please let me know if it works.
I got may issue fix by doing this,
I have this code in my service:
const loadData = () => {
config["params"] = {};
return axios.get(API_URL + "api/v1/badges", config).then((response) => {
//console.log("from loaddata..");
//console.log("load data", response);
return response;
});
};
const filterData = (data: any) => {
config["params"] = {
s: data,
};
return axios.get(API_URL + "api/v1/badges", config).then((response) => {
console.log("from filterdata..");
console.log("filter data", response);
return response;
})
;
I just added config["params"] = {}; this line of code to loadData
Thank you all!
im trying to get user location, and then use the location to return relevant data for is location.
but in the second function i get that the location is null (when i console.log(location) it prints the right location, at the second print, the first print is null) it seems like the second function is not waiting until the first one is done.
Here is some code:
from the component
const location = useSelector(state => state.locationReducer.location);
useEffect(()=> {
(async () => {
await getLocation();
// here i'm using the location from the first function
await getInfo(location);
})()
}, []);
const getLocation = async() => {
try {
await dispatch(getLocation());
console.log(location);
} catch (err) {
// TODO HANDLE ERROR;
console.log('Err:', err);
}
}
in the action
export const getLocation = locationName => {
return async dispatch => {
try {
const location = **await** locationService.getLocation(locationName);
**await** dispatch(setLocation(location));
} catch (err) {
throw err;
};
};
};
const setLocation = location => {
return {
type: types.SET_LOCATION,
location
};
};
in service
async function getLocation(locationName) {
try {]
return **await** axios.get(`${url}/${locationName}`);
} catch (err) {
throw err
};
};
The location value from the selector won't update after your first function has run and before the second function, so there you'll see the old value in your location variable.
You might need to return your location value from the reducer:
export const getLocation = locationName => {
return async dispatch => {
try {
const location = await locationService.getLocation(locationName);
await dispatch(setLocation(location));
return location;
} catch (err) {
throw err;
};
};
};
And use the returned location in your useEffect:
useEffect(()=> {
(async () => {
const location = await getLocation();
// here i'm using the location from the first function
await getInfo(location);
})()
}, []);
Or another possibility, to have an another effect, wich depends son the location value:
const location = useSelector(state => state.locationReducer.location);
useEffect(()=> {
getLocation();
}, []);
useEffect(()=> {
if(location) {
getInfo(location);
}
}, [location]);
And this would run every time location changes, and location has some value.
As Per Dan Abramov-
useEffect(() => {
async function fetchMyAPI() {
let url = 'http://something';
let config = {};
const response = await myFetch(url);
console.log(response);
}
fetchMyAPI();
}, []);
Here is the link for reference - https://github.com/facebook/react/issues/14326#issuecomment-441680293
Or You can simply use .then()
useEffect(() => {
asyncCall().then(setVal);
});
Article on how to fetch - https://www.robinwieruch.de/react-hooks-fetch-data
I try to fetch some object, but the problem is that I need to check first if there ist any object on cache endpoint, if not I should do normal fetching from regular endpoint.
So far I only managed to do fetching from:
Normal endpoint and set everything on state,
Cache endpoint and set everything on state
Any attempts to mix both methods ended in failure :(
How can I mix this two methods?
const getCache = async () => {
try {
const apiCall = await fetch(fetchCacheEndpoint)
const data = await apiCall.json()
return data
} catch (e) {
console.log(e);
}
}
const pageOne = getCache().then((result) => {
const convertedOBj = result.doSomeSeriousStuff()
this.setState({
desiredObj: convertedOBj
})
})
I expected to do something like this
const getCache = async () => {
try {
const apiCall = await fetch(fetchCacheEndpoint)
const data = await apiCall.json()
return data
} catch (e) {
console.log(e);
}
}
let convertedOBj
const pageOne = getCache().then((result) => {
if ((result === undefined) || (!result) || (result && !result.length > 0)) {
const makeRegularFetch = async () => {
const regularFetch = await fetch(regularEndPoint)
const data = await regularFetch.json()
}
const pageTwo = makeRegularFetch ().then((result) => {
convertedOBj = result.doSomeSeriousStuff()
this.setState({
desiredObj: convertedOBj
})
})
} else {
convertedOBj = result.doSomeSeriousStuff()
this.setState({
desiredObj: convertedOBj
})
}
})
After first fetch (getCache) is failed there is another fetch (makeRegularFetch) to second endpoint which is always fine, but only in the case when first(getCache) return empty object or just any kind of error
How can I handle this kind of action?
From what I can see in your second part of your code, you never execute your pageOne function.
Try pageOne() after your definition.
However I made a fiddle on stackblitz for your case: https://stackblitz.com/edit/js-eufm8h
If you don't understand something, feel free to ask.