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 <>...</>; }