I am using fetch to get data from API. I am using useEffect for page to stop rerender. But its not working
const [load, setLoad] = useState(false);
if (load) {
return <h2>Progress</h2>;
}
const fetchPicth = async () => {
setLoad(true);
const response = await fetch(url);
const data = await response.json();
setPicth(data.pink);
};
useEffect(() => {
setLoad(false);
}, [fetchPicth]);
This can be solved using 2 approaches
Pass state in dependency array of useEffect
const [picth, setPicth] = useState([]); // Initial state
useEffect(() => {
if (picth && picth.length !== 0) { // Checks if data exists and length
//is greater than 0
setLoad(false); // Set Loading to false
}
}, [picth]);
const fetchPicth = async () => {
setLoad(true);
const response = await fetch(url);
const data = await response.json();
setPicth(data.pink);
};
Check for the length, display Progress if there is no data. Display if data is present.
{picth.length === 0 && <div>Progress</div>}
{picth.length > 0 && (
<div>
{picth.map((book, index) => {
return (
<YourComponent></YourComponent>
);
})}
Remove the fetchPicth from the dependency array. If you'd like to set load to false you can do it like this:
const [load, setLoad] = useState(false);
if (load) {
return <h2>Progress</h2>;
}
const fetchPicth = async () => {
setLoad(true);
const response = await fetch(url);
const data = await response.json();
setPicth(data.pink);
setLoad(false)
};
useEffect(() => {
fetchPicth();
}, []);
Using the code above will only fetch the data from the API only once i.e; when the component is mounted.
Related
I am building a website using nextjs and axios. Users can apply to become a member and then be approved by admins. In the admin dashboard I initially load the users and the unapproved users and display them in a list.
When an admin clicks on a button the unapproved user should be approved. The functionality works. The only aspect I can't figure out is how to update the state.
Here is my code:
const AdminIndex = () => {
const [users, setUsers] = useState([])
const [unapprovedUsers, setUnapprovedUsers] = useState([])
useEffect(() => {
loadUnapprovedUsers()
loadUsers()
}, [])
const loadUnapprovedUsers = async () => {
const { data } = await axios.get('/api/admin/unapprovedUsers')
setUnapprovedUsers(data)
}
const loadUsers = async () => {
const { data } = await axios.get('/api/admin/users')
setUsers(data)
}
const approveUnapprovedUser = async (email) => {
try {
const { data } = await axios.put(
`/api/admin/approveUnapprovedUser/${email}`
)
setUnapprovedUsers([]) // only remove the approved user
setUsers(...data) // include the approved user into the array
} catch (err) {
console.log(err)
}
}
}
I am trying to remove the approved user from the unapprovedUsers array and try to add the user to the users array, hence updating the UI. The response returned by axios is an object, which doesn't make things easier.
I would be very thankful for any kind of help!
Just try to filter the unapprovedUsers with the users that don't have that email, also add the approved user to users state
const AdminIndex = () => {
const [users, setUsers] = useState([])
const [unapprovedUsers, setUnapprovedUsers] = useState([])
useEffect(() => {
loadUnapprovedUsers()
loadUsers()
}, [])
const loadUnapprovedUsers = async () => {
const { data } = await axios.get('/api/admin/unapprovedUsers')
setUnapprovedUsers(data)
}
const loadUsers = async () => {
const { data } = await axios.get('/api/admin/users')
setUsers(data)
}
const approveUnapprovedUser = async (email) => {
try {
const { data } = await axios.put(
`/api/admin/approveUnapprovedUser/${email}`
)
setUnapprovedUsers(prev => prev.filter(user => user.email !== email)) // only remove the approved user
setUsers(prev => [...prev, data]) // include the approved user into the array
} catch (err) {
console.log(err)
}
}
}
First part of my code:
const Inventory = () => {
const [products, setProducts] = useState([]);
const [pageCount,setPageCount] = useState(0);
//console.log(pageCount);
const [page,setPage] = useState(0);
const navigate = useNavigate();
useEffect(() => {
fetch(`http://localhost:3000/products?page=${page}`)
.then((res) => res.json())
.then((data) => setProducts(data));
}, [products,page]);
useEffect(()=>{
axios.get('http://localhost:3000/product-count')
.then((res) => {
const productCount = res?.data?.count;
//console.log("count product",count);
const pages = Math.ceil(productCount/6);
setPageCount(pages);
})
},[page])
Return section, this code will return pagination:
<div className="pagination">
{
[...Array(pageCount).keys()]
.map(number => <button key={number} className={page===number? 'selected': 'pagination'}
onClick={()=> setPage(number)}
>
{number+1}
</button>)
}
</div>
And this is the server-side code:
app.get("/products",async(req,res)=>{
const page = parseInt(req.query.page);
//console.log(page);
const q = {};
const cursor = productCollection.find(q);
let result;
if(page){
result = await cursor.skip(page * 6).limit(6).toArray();
}
else{
result = await cursor.toArray();
}
res.send(result);
})
// get product count
app.get("/product-count",async(req,res)=>{
const query = {};
const count = await productCollection.countDocuments(query);
res.json({count});
})
I want to load 6 data on the first load. But when data loads it displays all data. When I click the pagination button it works fine except the 1st button.
During the first load your front-end is sending page=0 to your backend.
In your server-side code you've the following statement: if (page)
But page will always be false when page=0, because 0 is a falsy value in javascript. So your statement always return the else block.
You need to change the statement to:
if (page !== undefined)
I have listend an event in customhook and when that event works, I have to do some logic there with state.but now I only get empty array every time that event callback works.
const useChatHistoryList = () => {
const sk = useSocket();
const [chatList, setChatList] = useState([]);
const [end, setEnd] = useState(true);
useEffect(() => {
sk.emit('chatlist');
}, [start]);
useEffect(() => {
const onChatListReceived = data => {
const _data = JSON.parse(data);
setHistoryLoading(false);
setChatList(_data);
};
const onChatListToUpdateReceived = data => {
const _data = JSON.parse(data);
console.log(chatList);//getting only empty array everytime
};
sk.on('chatlist', onChatListReceived);
sk.on('chatlistToUpdate', onChatListToUpdateReceived);
return () => {
sk.off('chatlistToUpdate');
sk.off('chatlist');
};
}, []);
return { chatList,end};
};
Try to log your data first to make sure the data is there, then set your state with the data.
const [state, setState]= useState([]);
const _onReceived = (data) => {
// Here is your data from socket
console.log(data);
// Then set state value with data
setState(data);
}
useEffect(()=>{
// Init socket listener
socket.on("event", _onReceived);
}, []);
// This effect will runs everytime state value is set (including when setting default value)
useEffect(()=>{
// Actual 'state' value
console.log('State value: ', state);
}, [state]);
==========================
Edit, related to your updated codes in the question
Your onChatListToUpdateReceived function brings empty default value to the listener even later when it’s updated, your listener will still recognize chatList value as an empty string. Try to move out onChatListToUpdateReceived outside useEffect.
const onChatListToUpdateReceived = data => {
const _data = JSON.parse(data);
console.log(chatList);//getting only empty array everytime
};
useEffect(() => {
const onChatListReceived = data => {
const _data = JSON.parse(data);
setHistoryLoading(false);
setChatList(_data);
};
sk.on('chatlistToUpdate', onChatListToUpdateReceived);
return () => {
sk.off('chatlistToUpdate');
sk.off('chatlist');
};
}, []);
useEffect(() => {
sk.off('chatlistToUpdate');
sk.on('chatlist', onChatListReceived);
}, [chatList]);
I have not used socket.io before but this is what I meant by asynchronous update. From your code, it looked to me like your callback is getting called before the state is updated. So to solve this, I added a useEffect() with chatList as a dependency so that callback gets called every time chatList gets updated. I hope this makes sense.
const useChatHistoryList = () => {
const sk = useSocket();
const [chatList, setChatList] = useState([]);
const [end, setEnd] = useState(true);
const onChatListReceived = data => {
const _data = JSON.parse(data);
setHistoryLoading(false);
setChatList(_data);
};
const onChatListToUpdateReceived = data => {
const _data = JSON.parse(data);
console.log(chatList); //getting only empty array everytime
};
useEffect(() => {
sk.on('chatlist', onChatListReceived);
sk.on('chatlistToUpdate', onChatListToUpdateReceived);
return () => {
sk.off('chatlistToUpdate');
sk.off('chatlist');
};
}, []);
// Emit chatlistToUpdate whenever chatList is updated
useEffect(() => {
sk.emit('chatlistToUpdate');
}, [chatList]);
return {
chatList,
end
};
};
I have a problem with one of my components. The problem I think I have is that my component executes before my user context stores the currentUser. My code only works when doing a hot reload.
The watchlist component gets all the values from the watchlist array where the document matches the currentUser.uid.
UserContext.js:
const [currentUser, setCurrentUser] = useState(null)
const [watchlist, setWatchlist] = useState(null)
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
})
return unsubscribe
}, [])
const getWatchlist = async () => {
const userRef = await getDoc(doc(db, 'users', currentUser.uid))
setWatchlist(userRef.data().watchlist)
console.log(userRef.data().watchlist)
}
These values are the ids of objects I then GET from an API, these are then pushed to the watchlistData array.
CryptoContext.js
export const getWatchlistData = async (list) => {
const watchlistData = []
for (const item of list) {
const result = await axios.get(
`${coingecko}/coins/${item}`
)
watchlistData.push(result.data)
}
return watchlistData
}
And this is how my Watchlist component code currently looks.
WatchlistItems.jsx
const { watchlist, getWatchlist, currentUser } = useContext(UserContext)
const { dispatch } = useContext(CryptoContext)
useEffect(() => {
if (currentUser) {
dispatch({type: 'SET_LOADING'})
const getWatchlistDataFromAPI = async () => {
await getWatchlist()
const watchlistData = await getWatchlistData(watchlist)
dispatch({type: 'GET_WATCHLIST', payload: watchlistData})
console.log(watchlistData)
}
getWatchlistDataFromAPI()
}
}, [currentUser])
If I refresh the page I get "Uncaught (in promise) TypeError: the list is not iterable", but if I do a hot reload, watchlist, and watchlistData both console.log with the correct data.
This is my first post and so please let me know if I've left anything out.
Thank you in advance for any help :)
Each object should have around 250 arrays in it, but for some reason, each of the objects has a single array except for the last one, which has 1250.
How can I spread out the responses so I can access each one individually?
const [coinData, setCoinData] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
createLocalStorage();
let existingLocalStorage = JSON.parse(localStorage.getItem('items'));
const fetchData = async () => {
const data = await Promise.all(
existingLocalStorage.map(obj =>
coinGecko.get(`/coins/${obj[0].coin}/market_chart/`, {
params: {
vs_currency: 'usd',
days: obj[0].time
}
}),
)
);
setCoinData(data);
setLoading(false);
};
fetchData();
}, []);
Here's the response:
response
I'm using create-react-app, and testing with console.log in the browser
I was sending the times as strings ('day', 'week', 'month', 'year', 'max') I totally forgot I needed to convert them to number values. Since max was the only acceptable parameter, that's the only one that returned the response I was looking for
Try calling your method like below-
import axios from 'axios';
useEffect(() => {
createLocalStorage();
let existingLocalStorage = JSON.parse(localStorage.getItem('charts'));
const fetchData = async () => {
await axios.all([api1, api2]).then(axios.spread((...responses) => {
const resp1 = responses[0]
const resp2 = responses[1]
// use the results
})).catch(errors => {
// errors.
})
}
fetchData();
}, []);