Develop Reference

Why does my prop not having my adding field?

can someone see why do I have selectionNames:[] empty when I console log ??
In the rest of my code, I'm using only selectionNames, it has the same content of names, but with an extra field selected. Therefore, I've thought using one sate i.e names instead of 2 i.e selectionNames and modifying names directly in my useEffect (to add my selected field but it's not working.
Can someone see where is the issue please ?
export default function Display() {
const [names, setNames] = useState([])
useEffect(() => {
axios.post("")
.then(res => {
console.log(res)
setNames(res.data.names)
})
.catch(err => {
console.log(err)
})
}, []);
const init = (e) => {
return e.map((item) => {
return {..item,types: item.types.map((t) => ({ ...t, selected: true }))
};
});
};
const [selectionNames, setSelectionNames] = useState(init(names));
console.log(selectionNames)
...
const change = (id,item, value) => {setSelectionStandards((s) => s.map((item) => {...} return item;}));
};
return (
<>
{selectionNames.map((item) => (...))}
</>
);
}
Here is my json from my api:
{
"names": [
{
"id": 1,
"Description": "descr",
"types": [
{
"id": 1,
"decription":"descr1",
},
...
]
},
...
]
}

This is what you should do:
import {useState, useEffect} from 'react';
const Display = () => {
// The initial state is empty
const [names, setNames] = useState([]);
// This function will be called when component mounts
const init = async () => {
const {data} = axios.post('');
setNames(data.names);
}
useEffect(() => {
init();
} , [])
// First time, this will print an empty array.
// After the initialization, you will get the actual names array
console.log(names);
}

import {useState, useEffect} from 'react';
const Display = () => {
// The initial state is empty
const [names, setNames] = useState([]);
// This function will be called when component mounts
const init = async () => {
const { data } = await axios.post(''); // put the await before, call axios
setNames(data.names);
}
useEffect(() => {
init();
} , [])
// First time, this will print an empty array.
// After the initialization, you will get the actual names array
console.log(names);
}

React useState hook - set value

I'm new to the whole React and React hooks staff, I'm trying to reset the value in useState to default if new filters are selected.
const [apartments, setApartments] = React.useState([])
const [page, setPage] = React.useState(1)
const fetchData = (onInit = true, loadMore = true) => {
let setQuery = ''
if (!loadMore) {
setApartments([]) // <--- how to reset to empty?
setPage(1) // <--- Not setting value to 1
}
if (!onInit || query()) {
filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach(item => {
if (item.value) {
setQuery += `&${ item.name }=${ item.value }`
}
})
}
fetch(apiUrl + `?page=${ page }&pageSize=12${ setQuery }`)
.then(res => res.json())
.then(data => {
setApartments([...apartments, ...data.apartments] || [])
setHasNextPage(data.hasNextPage)
setPage(prev => prev + 1)
})
}

Identify the page to pass to fetch from the loadMore argument, not from the state value. Similarly, identify from the argument what to pass to setApartments. This way, all the state gets updated at once, inside the fetch.
const fetchData = (onInit = true, loadMore = true) => {
let setQuery = ''
if (!onInit || query()) {
filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach(item => {
if (item.value) {
setQuery += `&${item.name}=${item.value}`
}
})
}
const pageToNavigateTo = loadMore ? page : 1;
fetch(apiUrl + `?page=${pageToNavigateTo}&pageSize=12${setQuery}`)
.then(res => res.json())
.then(data => {
const initialApartments = loadMore ? apartments : [];
setApartments([...initialApartments, ...data.apartments]);
setHasNextPage(data.hasNextPage);
setPage(pageToNavigateTo + 1);
})
// .catch(handleErrors); // don't forget this
}
I'd also recommend changing the
filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach
from DOM methods to setting React state instead.

Cleaning component states useEffect

I have states :
const { id } = useParams<IRouterParams>();
const [posts, setPosts] = useState<IPost[]>([]);
const [perPage, setPerPage] = useState(5);
const [fetchError, setFetchError] = useState("");
const [lastPostDate, setLastPostDate] = useState<string | null>(null);
// is any more posts in database
const [hasMore, setHasMore] = useState(true);
and useEffect :
// getting posts from server with first render
useEffect(() => {
console.log(posts);
fetchPosts();
console.log(hasMore, lastPostDate);
return () => {
setHasMore(true);
setLastPostDate(null);
setPosts([]);
mounted = false;
return;
};
}, [id]);
When component change (by id), I would like to clean/reset all states.
My problem is that all states are still the same, this setState functions in useEffect cleaning function doesn't work.
##UPDATE
// getting posts from server
const fetchPosts = () => {
let url;
if (lastPostDate)
url = `http://localhost:5000/api/posts/getPosts/profile/${id}?limit=${perPage}&date=${lastPostDate}`;
else
url = `http://localhost:5000/api/posts/getPosts/profile/${id}?limit=${perPage}`;
api
.get(url, {
headers: authenticationHeader(),
})
.then((resp) => {
if (mounted) {
if (resp.data.length === 0) {
setFetchError("");
setHasMore(false);
setPosts(resp.data);
return;
}
setPosts((prevState) => [...prevState, ...resp.data]);
if (resp.data.length < perPage) setHasMore(false);
setLastPostDate(resp.data[resp.data.length - 1].created_at);
setFetchError("");
}
})
.catch((err) => setFetchError("Problem z pobraniem postów."));
};

if your component isnt unmounted, then the return function inside useEffect will not be called.
if only the "id" changes, then try doing this instead:
useEffect(() => {
// ... other stuff
setHasMore(true);
setLastPostDate(null);
setPosts([]);
return () => { //...code to run on unmount }
},[id]);
whenever id changes, the codes inside useEffect will run. thus clearing out your states.

OK, I fixed it, don't know if it is the best solution, but works...
useEffect(() => {
setPosts([]);
setHasMore(true);
setLastPostDate(null);
return () => {
mounted = false;
return;
};
}, [id]);
// getting posts from server with first render
useEffect(() => {
console.log(lastPostDate, hasMore);
hasMore && !lastPostDate && fetchPosts();
}, [lastPostDate, hasMore]);

Dynamic and controlled component in react hooks

I want to dynamically generate controlled input components.
data is an array of object, which has following form:
data = [{obj1}, {obj2}, ...] // length not fixed
After data is loaded, it triggers useMemo and useEffect as below:
const [row, setRow] = useState([]);
const onContentChange = e => {
const currentRow = [...row]
currentRow[e.target.dataset.idx][e.target.className] = e.target.value
setRow(currentRow)
}
useEffect(() => {
const arr = []
data.forEach(obj => {
arr.push({
content: obj.content
})
})
setRow(arr)
}, [data])
const mData = useMemo(() => {
const retArr = []
data.forEach( (obj, i) => {
retArr.push({
content: (
<input
type="text"
className="content"
name={`content-${i}`}
id={`content-${i}`}
data-idx={i}
onChange={onContentChange}
value={row[i].content} // Error
/>
)
})
})
return retArr;
}, [data])
However, row[i] is empty at that moment. Maybe useRow function in useEffect is executed after factory of useMemo done.
Since there is a callback at useEffect, is there any way to control order of useEffect and useMemo?
Any other opinions are appreciated!

How can I run multiple queries on load of functional component using UseEffect and get result in render method?

I have the following functional component where, on load of the component, it needs to loop through an array and run some async queries to populdate a new array I want to display in render method.
import React, { useEffect, useState, useContext } from 'react';
import { AccountContext } from '../../../../providers/AccountProvider';
import { GetRelationTableCount } from '../../../../api/GetData';
import { getTableAPI } from '../../../../api/tables';
const RelatedRecordsPanel = (props) => {
const { userTokenResult } = useContext(AccountContext);
const { dataItem } = props;
const [relatedTableItems, setRelatedTableItems] = useState([]);
useEffect(() => {
const tempArray = [];
const schema = `schema_${userTokenResult.zoneId}`;
const fetchData = async () => {
return Promise.all(
dataItem.tableinfo.columns
.filter((el) => el.uitype === 1)
.map(async (itm) => {
const tblinfo = await getTableAPI(itm.source.lookuptableid);
const tblCount = await GetRelationTableCount(
dataItem.tableid,
itm.source.jointable,
schema,
);
const TableIconInfo = { name: tblinfo.name, icon: tblinfo.icon, count: tblCount };
tempArray.push(TableIconInfo);
})
);
};
fetchData();
setRelatedTableItems(tempArray)
}, []);
return (
<div>
{relatedTableItems.length > 0 ? <div>{relatedTableItems.name}</div> : null}
</div>
);
};
In the above code, the queries run correctly and if I do a console.log in the loop, I can see if fetches the data fine, however, the array is always [] and no data renders. How do I write this async code such that it completes the queries to populate the array, so that I can render properly?
Thx!

You aren't using the return value of the Promise.all and since all your APIs are async, the tempArray is not populated by the time you want to set it into state
You can update it like below by waiting on the Promise.all result and then using the response
useEffect(() => {
const schema = `schema_${userTokenResult.zoneId}`;
const fetchData = async () => {
return Promise.all(
dataItem.tableinfo.columns
.filter((el) => el.uitype === 1)
.map(async (itm) => {
const tblinfo = await getTableAPI(itm.source.lookuptableid);
const tblCount = await GetRelationTableCount(
dataItem.tableid,
itm.source.jointable,
schema,
);
const TableIconInfo = { name: tblinfo.name, icon: tblinfo.icon, count: tblCount };
return TableIconInfo;
})
);
};
fetchData().then((res) => {
setRelatedTableItems(res);
});
}, []);