• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

132
Views
El estado no se actualiza cuando se usa setstate en reaccionar con ganchos

Me enfrento a un problema con respecto al setstate . Quiero hacer los siguientes pasos:

  1. Estoy obteniendo algunos blogs del servidor.
  2. Adición de datos de blogs al estado de blogs
  3. Filtrado de un blog que es el mismo que el parámetro de URL
  4. Agregar ese blog al estado del blog

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 :)

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

  1. 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:
  2. blog no necesita ser estado de todos modos, ya que puede derivarse de blogs y params; deberías usar useMemo entonces.
  3. No es necesario que FixURL sea una función interna. Es más limpio moverlo fuera del componente.
  4. Supongo que desea un solo blog (artículo) ya que el átomo de estado se llama 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 <>...</>; }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error