Develop Reference

React Native 'ERROR TypeError: Cannot convert undefined value to object'

I'm trying to retrieve data in this way:
useEffect(() => {
async function fetchData() {
const response = await fetch('https://hasanadiguzel.com.tr/api/kurgetir');
const json = await response.json();
setData(json);
}
fetchData();
}, []);
console.log(data.TCMB_AnlikKurBilgileri[0].Isim);
When I run console.log(data.TCMB_AnlikKurBilgileri); upon opening the application, the API seems to be working fine and the data is being retrieved. However, when I try to retrieve data.TCMB_AnlikKurBilgileri[0].Isim with console.log(data.TCMB_AnlikKurBilgileri[0].Isim);, I get the error: ERROR TypeError: Cannot convert undefined value to object.
But, when I save the application after running console.log(data.TCMB_AnlikKurBilgileri); and then run console.log(data.TCMB_AnlikKurBilgileri[0].Isim);, it works without any problems and gives the output.
How can I solve this issue? note: You can watch the video to better understand my problem https://youtu.be/x_mlvMDzUt4

You are trying to console.log outside of useEffect. It cause the problem since your api did not fetch data yet, but you are trying to log data.
So, move your console.log inside of useEffect to check api response is correct.
const json = await response.json();
console.log(json.TCMB_AnlikKurBilgileri[0].Isim);
setData(json);
At first when you render the component, data has no any value(so maybe undefined) if you did not set initial value. Once api request done and updated state with response, your UI will updated with correct value.

You are trying to assign an object to an array. data is array and json is an object.
Instead of empty array use null as default value:
const [data, setData] = useState(null)
In order to track data changes you should also add a separate useEffect
useEffect(() => {
console.log(data?.TCMB_AnlikKurBilgileri[0]?.Isim)
},[data])

("[object Promise]") cannot be serialized as JSON

Full error:
Error: Error serializing .b returned from getStaticProps in "/".
Reason: object ("[object Promise]") cannot be serialized as JSON.
Please only return JSON serializable data types.
I am trying to call one of my functions that retrieves some data from an API endpoint however when trying to pass this data to props I get an error. I am not exactly sure what I am doing wrong as the fetch call works if its within GetStaticProps but I want all my logic for fetch calls to exist within a separate js page to reduce redundancies, however when doing so this error is created.
export async function getStaticProps() {
let b = WordpressService.getPageByIdTest(50);
return {
props: {
b: b,
},
revalidate: 30
}
}
const WordpressService = {
async getPageByIdTest(id) {
const resIndexPage = await fetch(`${url}pages/${id}`);
const indexPageData = await resIndexPage.json();
return indexPageData;
}
}

I was going over the latest version of nextjs and I did notice that the demo was odd when I ran it. Specifically, I got this error when running their example:
Error: Additional keys were returned from getStaticProps. Properties
intended for your component must be nested under the props key, e.g.
export async function getSortedPostsData() {
// Instead of the file system,
// fetch post data from an external API endpoint
const res = await fetch('..')
return res.json()
}
This is not exactly your issue but assigning the props object via res.json() also caused the same error you are experiencing.
So, for me, using node 15 I changed my api call to:
export async function getStaticProps() {
const url = `https://my-url`
const result = await fetch(url)
return { props: {
result: await result.json()
}}
}
And this solved my problem. So Ivar's comment looks correct - await the result and then in my case I had to also await the json result from node-fetch so that the promises completed properly.

It can be easily solved with the package "superjson".
Effective and easy to use.
https://www.npmjs.com/package/superjson
for me, I wanted to convert "QuerySnapshot" from firestore which has timestamps in it.
posts = (await getDocs(postQuery)).docs.map((postDoc) => {
return superjson.stringify(postDoc);
});
picture from: https://www.npmjs.com/package/superjson

Is it possible to use async await with regular function which is not marked async in react?

Please note, below code is not actual code. There`s lot omitted for bravity.
I am using react with typescript and all my components are functional components.
I have following function which is like
export const filterData = (data) => {
// do lots of filtering on data, does not make any api calls.
// only do Array.filter, map etc to remove unwanted data
};
This function is defined in separate utils file and imported in my react component. I am using it as following
//Fetch data using hook from API
const receivedDataFromAPI = useDetails(detailsParams);// Data is already received here. Verified that data is coming from network tab and console log
const cleanedData = allFilter(receivedDataFromAPI);
const allFilter = async (receivedData: IData) => {
const data = await filterData(receivedData);
// other code
}
Earlier I was not using it with async await but then, execution was not waiting for filterData to return result. After doing lots of trial and error, I came to async await and code is working fine now. The question is above pattern ok or I need to make filterData function async?

Filtering a JSON response with Vue

I'm practicing using axios with Vue, but I think this may be more of a general JSON question.
I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.
Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.
data(){
return {
products: []
}
},
components: {
Product
},
computed: {
foodProducts(){
return this.products.filter(x => x.department == 'Food')
}
},
mounted() {
axios
.get('./json/products.json')
.then(response => (this.products = response.data.products))
}
Thanks. Just trying to clarify the theory behind it.

It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts: []
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}

If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.

Javascript fetch API in react-flux

I am studying the flux-react-router-example by #Dan Abramov, I notice in the Fetch API code here: The fetch API has a return promise that has a nested return inside:
return fetch(url).then(response =>
response.json().then(json => {
const camelizedJson = camelizeKeys(json);
const nextPageUrl = getNextPageUrl(response) || undefined;
return {
...normalize(camelizedJson, schema),
nextPageUrl
};
})
);
I am confused with this nested returns, why is this used here? Why not just return response.json()?
Seems like if I do the same thing, I will get a undefined value

The json retrieved from the response is
converted to camelCase using humps
un-nested using normalizr for easier handling in combination with the redux store
enriched with the next page url, parsed from the link header
More discussion and reasoning about why storing nested response objects in the store is usually a bad idea can be found at the React JS Google Group.