I want to update the Category list after delete a category, I used custom hook for fetching data from the server. I'm not sure how to update state on custom fetch hook
const {data, error, loading} = useFetch("/api/admin/category");
const [category, setCategory]= useState([]);
useEffect(() => {
setCategory(data)
},[])
const deleteHandler = (id) => {
const deleteRequest = async () => {
const data = await axios.delete(`/api/admin/category/${id}`);
return data;
}
deleteRequest()
.then(res => {
data.filter((item) => {
return id !== item.id;
})
})
}
Adding data as the dependency to the useEffect hook may help, try this,
const {data, error, loading} = useFetch("/api/admin/category");
const [category, setCategory]= useState([]);
useEffect(() => {
setCategory(data)
},[data])
const deleteHandler = (id) => {
const deleteRequest = async () => {
const data = await axios.delete(`/api/admin/category/${id}`);
return data;
}
deleteRequest()
.then(res => {
data.filter((item) => {
return id !== item.id;
})
})
}
could you add you're custom hook to the code provided? and also be a bit more specific with your query?
import {useEffect, useState} from "react";
import axios from "axios";
const useFetch = (url) => {
const [data, setData,isLoading] = useState([]);
const [error, setError] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
request_get()
.then(res => {
if (res.request.status === 200) {
setTimeout(() => {
setLoading(false)
setData(res.data.data)
},1000)
}
})
return () => {
setData([]);
}
}, [])
const request_get = async () => {
const data = await axios.get(url)
return data;
}
return {data: data, error: error, loading:loading}
}
export default useFetch;
in your custom hook add data to your dependency array;
in your component instead of the folowing
useEffect(() => {
setCategory(data)
},[])
try to use the spread operator
useEffect(() => {
setCategory([...data])
},[data])
Related
const Notes = () => {
const history = useNavigate();
const [apiData, setApiData] = useState([]);
useEffect(() => {
axios
.get(`https://6390acc765ff4183111b53e9.mockapi.io/notes`)
.then((getData) => {
setApiData(getData.data);
});
}, []);
const onDelete = (id) => {
axios
.delete(`https://6390acc765ff4183111b53e9.mockapi.io/notes/${id}`)
.then(() => {
history("/notes");
});
};
This way I can delete the note that i fetched earlier, but it still appears on the screen until I refresh manually. It doesn't also go to /notes because i am already on /notes
You can either return the updated data in the delete response to update the local state, or you can trigger a refetch of the data after a successful deletion.
Refetch Example:
const Notes = () => {
const history = useNavigate();
const [apiData, setApiData] = useState([]);
const fetchNotes = useCallback(async () => {
const getData = await axios
.get(`https://6390acc765ff4183111b53e9.mockapi.io/notes`);
setApiData(getData.data);
}, []);
useEffect(() => {
fetchNotes();
}, [fetchNotes]);
const onDelete = async (id) => {
await axios
.delete(`https://6390acc765ff4183111b53e9.mockapi.io/notes/${id}`);
fetchNotes();
history("/notes");
};
...
Returned response Example*:
const Notes = () => {
const history = useNavigate();
const [apiData, setApiData] = useState([]);
useEffect(() => {
axios
.get(`https://6390acc765ff4183111b53e9.mockapi.io/notes`)
.then((getData) => {
setApiData(getData.data);
});
}, []);
const onDelete = async (id) => {
const getData = await axios
.delete(`https://6390acc765ff4183111b53e9.mockapi.io/notes/${id}`);
setApiData(getData.data);
history("/notes");
};
...
*Note: This requires updating the backend code to return the updated data in the response.
I followed a Reat.js teching video by a YouTube uploarder The Net Ninjia YouTube
In this video, the author indecated a runtime warning:Warning：Can't perform a React state update on an unmounted component.
But according to the following code I can't reproduce this waring.My code works just fine.
So what happened to this following code? Is it because React.js updated something?
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// const abortCont = new AbortController();
setTimeout(() => {
fetch(url)
.then((res) => {
// console.log(res);
if (!res.ok) {
throw Error('could not fetch data for some reason');
} else {
return res.json();
}
})
.then((res) => {
setData(res);
setIsPending(false);
setError(null);
})
.catch((err) => {
console.log(err);
});
}, 2000);
}, [url]);
return { data, isPending, error };
};
export default useFetch;
However, I followed the video, changed the code as below, it raised a AbortError.But according to the author, this error won't happen.
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
setTimeout(() => {
fetch(url, { signal: abortCont.signal })
.then((res) => {
if (!res.ok) {
throw Error('could not fetch data for some reason');
} else {
return res.json();
}
})
.then((res) => {
setData(res);
setIsPending(false);
setError(null);
})
.catch((err) => {
if (err.name === 'AbortError') {
console.log(err.name);
} else {
setIsPending(false);
setError(err.message);
}
});
}, 2000);
return () => abortCont.abort();
}, [url]);
return { data, isPending, error };
};
export default useFetch;
Working on a small application that takes a pexels api and displays photos dynamically. When I send the search request for my api to fectch based on the new params, it does actually update the page with new photos but not the ones based on the params. I though I got the search function correct, maybe it's cause I'm not using it in a useEffect? But if I did use it in a useEffect, I wouldn't be able to set it on the onClick handle. I tried to console.log the query I was getting from the onChange but it doesn't seem like it's getting the result. What am I doing wrong?
import { useState, useEffect } from 'react'
import pexelsApi from './components/pexelsApi'
import './App.css'
const App = () => {
const [images, setImages] = useState([]);
const [loading, setLoading] = useState(false);
const [nextPage, setNextPage] = useState(1);
const [perPage, setPerPage] = useState(25);
const [query, setQuery] = useState('');
const [error, setError] = useState('');
useEffect(() => {
const getImages = async () => {
setLoading(true);
await pexelsApi.get(`/v1/curated?page=${nextPage}&per_page=${perPage}`)
.then(res => {
setImages([...images, ...res.data.photos]);
setLoading(false);
}).catch(er => {
if (er.response) {
const error = er.response.status === 404 ? 'Page not found' : 'Something wrong has happened';
setError(error);
setLoading(false);
console.log(error);
}
});
}
getImages();
}, [nextPage, perPage]);
const handleLoadMoreClick = () => setNextPage(nextPage + 1)
const search = async (query) => {
setLoading(true);
await pexelsApi.get(`/v1/search?query=${query}&per_page=${perPage}`)
.then(res => {
setImages([...res.data.photos]);
console.log(res.data)
setLoading(false);
console.log(query)
})
}
if (!images) {
return <div>Loading</div>
}
return (
<>
<div>
<input type='text' onChange={(event) => setQuery(event.target.value)} />
<button onClick={search}>Search</button>
</div>
<div className='image-grid'>
{images.map((image) => <img key={image.id} src={image.src.original} alt={image.alt} />)}
</div>
<div className='load'>
{nextPage && <button onClick={handleLoadMoreClick}>Load More Photos</button>}
</div>
</>
)
};
export default App
import axios from 'axios';
export default axios.create({
baseURL: `https://api.pexels.com`,
headers: {
Authorization: process.env.REACT_APP_API_KEY
}
});
Your main issue is that you've set query as an argument to your search function but never pass anything. You can just remove the arg to have it use the query state instead but you'll then need to handle pagination...
// Helper functions
const getCuratedImages = () =>
pexelsApi.get("/v1/curated", {
params: {
page: nextPage,
per_page: perPage
}
}).then(r => r.data.photos)
const getSearchImages = (page = nextPage) =>
pexelsApi.get("/v1/search", {
params: {
query,
page,
per_page: perPage
}
}).then(r => r.data.photos)
// initial render effect
useEffect(() => {
setLoading(true)
getCuratedImages().then(photos => {
setImages(photos)
setLoading(false)
})
}, [])
// search onClick handler
const search = async () => {
setNextPage(1)
setLoading(true)
setImages(await getSearchImages(1)) // directly load page 1
setLoading(false)
}
// handle pagination parameter changes
useEffect(() => {
// only action for subsequent pages
if (nextPage > 1) {
setLoading(true)
const promise = query
? getSearchImages()
: getCuratedImages()
promise.then(photos => {
setImages([...images, ...photos])
setLoading(false)
})
}
}, [ nextPage ])
The reason I'm passing in page = 1 in the search function is because the setNextPage(1) won't have completed for that first page load.
I've tried to fetch data from a URL and get the result as JSON format, then store not of the object result in my state. but it always returns an empty array.
const [genres, setGenres] = useState([]);
useEffect(() => {
const getGenres = async () => {
fetch("https://quote-garden.herokuapp.com/api/v2/genres")
.then((response) => response.json())
.then((data) => {
for (const g of data.genres) {
setGenres((oldGenres) => [...oldGenres, g]);
}
});
};
getGenres();
}, []);
Here is the code:
I don't see where the problem can be.
ps: I deleted the import so the code is more readable
import React, { useEffect, useState } from "react";
function App() {
const [quoteOfTheDay, setQuoteOfTheDay] = useState("");
const [authorOfQod, setAuthorOfQod] = useState("");
useEffect(() => {
const getQuoteOfTheDay = async () => {
fetch("https://quotes.rest/qod?language=en")
.then((response) => response.json())
.then((data) => {
const qod = data.contents.quotes[0].quote;
const author = data.contents.quotes[0].author;
setQuoteOfTheDay(qod);
setAuthorOfQod(author);
});
};
getQuoteOfTheDay();
}, []);
const [genres, setGenres] = useState([]);
useEffect(() => {
const getGenres = async () => {
fetch("https://quote-garden.herokuapp.com/api/v2/genres")
.then((response) => response.json())
.then((data) => {
for (const g of data.genres) {
setGenres((oldGenres) => [...oldGenres, g]);
}
});
console.log(genres); // genres always empty
};
getGenres();
}, []);
return (
<div className="app">
<Head quoteOfTheDay={quoteOfTheDay} author={authorOfQod} />
<div className="app__category">
<QuoteCategory genre="sport" />
</div>
</div>
);
}
export default App;
Thank you so much
I think it should work if you change
for (const g of data.genres) {
setGenres((oldGenres) => [...oldGenres, g]);
}
to
setGenres((oldGenres) => [...oldGenres, ...data.genres]);
Are you sure that
useEffect(() => {
const getGenres = async () => {
fetch("https://quote-garden.herokuapp.com/api/v2/genres")
.then((response) => response.json())
.then((data) => {
setGenres(data.genres);
});
};
getGenres();
}, []);
is not enough? :)
Up. If you began you can use async-await syntax till the end. It looks more neatly.
useEffect(() => {
const getGenres = async () => {
const response = await fetch("https://quote-garden.herokuapp.com/api/v2/genres");
const { genres } = await response.json();
setGenres(genres);
};
getGenres();
}, []);
you should put genresState as your dependency
const [genresState, setGenres] = useState([])
useEffect(() => {
const getGenres = async () => {
const response = await fetch("https://quote-garden.herokuapp.com/api/v2/genres");
const { genres } = await response.json();
setGenres(genres);
};
getGenres();
}, [genresState]);
function Graph() {
const [tcases, setCases] = useState([]);
const [recovered, setRecovered] = useState([]);
const [deaths, setDeaths] = useState([]);
useEffect(() => {
axios
.get("https://disease.sh/v3/covid-19/historical/all?lastdays=all")
.then((res) => {
setCases(Object.values(res.data.cases));
setRecovered(Object.values(res.data.recovered)));
setDeaths(Object.values(res.data.deaths)));
})
.catch((err) => {
console.log(err);
});
}, []);
I have tried the above code..it says cases,recovered and deaths are undefined
API used:click here to see the api
I want it like this ..Please help! :)
tcases=[555,654,941...........]
recovered=[17,18,26.........]
deaths=[28,30,36...........]
Thank you!
function Graph() {
const [tcases, setCases] = useState([]);
const [recovered, setRecovered] = useState([]);
const [deaths, setDeaths] = useState([]);
const [date, setDate] = useState([]);
useEffect(() => {
axios
.get("https://disease.sh/v3/covid-19/historical/all?lastdays=all")
.then(res => {
setCases(JSON.parse(JSON.stringify(Object.values(res.data.cases))));
setDeaths(JSON.parse(JSON.stringify(Object.values(res.data.deaths))));
setRecovered(JSON.parse(JSON.stringify(Object.values(res.data.recovered))));
})
.catch(err => {
console.log(err);
});
}, []);
JSON.stringify returns a string..Inorder to store it in array format we will have to use JSON.parse which returns an object.