Me enfrento a un problema con respecto al setstate . Quiero hacer los siguientes pasos:
el problema viene en el paso 4 cuando intento agregar ese blog en particular al estado del blog. Cuando registro ambos estados, el estado del blog aparece como una matriz vacía [].
function BlogDetail(props) { const [blog, setBlog] = useState([]); const [blogs, setBlogs] = useState([]); let param = useParams(); // Fetch blogs from server const getBlogs = () => { axios .get("/blog/all_blog/") .then((res) => { setBlogs(res.data); console.log(res.data); }) .catch((err) => console.log(err)); }; const getBlog = () => { const FixURL = (url) => url .replace(/[^a-zA-Z ]/g, "") .replace(/\s+/g, "-") .toLowerCase(); setBlog(blogs.filter((artical) => FixURL(artical.title) === param.id)); }; useEffect(() => { getBlogs(); getBlog(); }, []); console.log(blog); console.log(blogs); return <>...</>; }
También traté de deformar este setBlog en la función de devolución de llamada, pero funciona para mí, sin entender por qué el estado del blog se actualiza.
Gracias de antemano :)
getBlog()
se ejecuta antes de que finalice la búsqueda de getBlogs()
, por lo que no hay blogs
para filtrar. El contenido de getBlog()
podría moverse a .then()
en getBlogs()
, pero no es una buena idea:blog
no necesita ser estado de todos modos, ya que puede derivarse de blogs
y params; deberías usar useMemo
entonces.FixURL
sea una función interna. Es más limpio moverlo fuera del componente.blog
, así que cambié .filter
para find
. const FixURL = (url) => url .replace(/[^a-zA-Z ]/g, "") .replace(/\s+/g, "-") .toLowerCase(); function BlogDetail(props) { const [blogs, setBlogs] = useState(); const { id } = useParams(); useEffect(() => { axios.get("/blog/all_blog/").then(({ data }) => setBlogs(data)); }, []); const blog = React.useMemo(() => (blogs || []).find((article) => FixURL(article.title) === id)); console.log(blog); console.log(blogs); return <>...</>; }