0

soy muy nuevo en React, y estoy intentando cambiar el valor de 'contador'.

const [contador, setContador] = useState(0);
    let cont = 0;
    
    const DeterminarCont = () => {
        
      historial.forEach(h => {
        if (h.fecha.slice(0,2) === '27') {
          cont += 1;
          setContador(cont); //incluso probé con: setContador(3) por poner cualquier valor  
          console.log('Si!'); 
          console.log('contador: ', contador);
        }
      }

     useEffect(() => {
        DeterminarCont();
      }, []);

Por consola los valores son actualizados correctamente pero en vista no, y no entiendo por qué o como solucionarlo.

return ( 
      <>
        <h2>{contador}</h2> //Se mantienen en 0 en la vista, pero por consola me actualiza los n°s
        <h3>  {cont}  </h3>
      </>
    )

Hay alguna forma de que al entrar al componente se actualice 'contador' en la vista?, ya que solo lo hace por consola. Gracias de antemano

2
  • que es lo que almacena la variable historial y por qué la recorres con un forEach. Cabe destacar que tienes puesto un useEffect que solo se ejecuta en la primera carga del componente por lo que solo sumará una única vez al contador sin ver mucho más el código que tienes para saber exactamente qué es lo que quieres hacer Commented el 30 may. 2022 a las 6:12
  • Hola, historial contiene un arreglo de fechas, por lo que cada fecha que coincida con el día 27 sumará uno a 'Contador'. Por consola 'Contador' se actualiza correctamente, pero en la vista solo se queda en 0. Lo hice con forEach y no .map porque este me tira el error "Array.prototype.map() expects a return value from arrow function". Gracias por tu tiempo amigo. Commented el 30 may. 2022 a las 14:05

1 respuesta 1

0

Viendo que tienes una variable auxiliar para hacer las veces de contador, no sería necesario actualizar el estado cada vez que cuenta un nuevo item que cumple la condición, sino que puedes sumar al contador y una vez tienes el número final de items cambias el estado del contador. Esto para evitar múltiples recargas de estado.

En adición a esto he visto que el forEach no estaba bien cerrado ya que estaba cerrada la funcion interna pero no el paréntesis del final del forEach.

const DeterminarCont = () => {
  let cont = 0;
  historial.forEach(h => {
    if (h.fecha.slice(0,2) === '27') {
      cont++; 
    }
  });
  setContador(cont);
}

useEffect(() => {
  DeterminarCont();
}, []);

Este comportamiento tambien podría conseguirse con un reduce de tal forma que:

const DeterminarCont = () => {
  const finalCount = historial.reduce((acc, current) => current.fecha.slice(0,2) === '27' ? acc + 1 : acc, 0);
  setContador(finalCount);
}

useEffect(() => {
  DeterminarCont();
}, []);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.