1

tengo una aplicación de tareas muy básica, únicamente agregas tarea con una fecha limite de entrega y cuando esta esta por llegar a tal fecha, te debería mostrar una notificación, la app efectivamente me muestra la notificación cuando esta por vencer, el problema es que cuando intento agregar otra tarea por cada letra que vaya copiando se actualiza el estado y por ende me vuelve a mostrar la notificación varias veces este es mi código, alguna idea de como solucionarlo ? Muchísimas gracias de ante mano

import React, { useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

export default function App () {
  const [state, setState] = useState({
    name: '',
    fecha: ''
  })

  const [tasks, setTasks] = useState({
    data: JSON.parse(localStorage.getItem('tasks')) || []
  })

  const handleAdd = () => {
    const data = JSON.parse(localStorage.getItem('tasks'))
    if(data){
      data.push(state)
      localStorage.setItem('tasks', JSON.stringify(data))
    }else{
      localStorage.setItem('tasks', JSON.stringify([state]))
    }
  }

  const handleChange = (e) => {
    return setState({
      ...state,
      [e.target.name]: e.target.value
    })
  }

  function getFecha(limitFecha, name){
    let remainTime = (new Date(limitFecha) - new Date() + 1000) / 1000,
        remainDays = Math.floor(remainTime /(3600 * 24))

    if(remainDays <= '00'){
      toast.warn(`${name} esta por vencer!`)
    }
  }

  return (
    <div className="App">
      <ToastContainer />
      <div>
        <h2>Welcome to React</h2>
        <h1>Agrege una tarea</h1>
        <input type="text" name="name" onChange={handleChange} placeholder="Nombre de la tarea"></input>
        <input
          onChange={handleChange}
          type="date" 
          name="fecha" 
          step="1" 
          min={new Date()} 
          max="2022-12-31" 
        />
        <button onClick={handleAdd}>ADD TASK</button>
      </div>
      <div>
        {
          tasks.data.length > 0 ? tasks.data.map((item, index) => {
            return(
              <div className="task" key={index}>
                <h3>{item.name}</h3>
                <p>{item.fecha}</p>
                {
                  getFecha(item.fecha, item.name)
                }
              </div>
            )
          }): <h2>No tienes tareas pendientes</h2>
        } 
      </div>

    </div>
  );
  
}

2 respuestas 2

1

Cuando se cambia el estado del componente react re-renderiza el componente, es decir, ejecuta otra vez el componente App() y si hay cambios en los vista los refleja en el DOM.

Al tener getFecha(item.fecha, item.name) dentro del jsx esto hace que esto se ejecute en cada render cuando se cambia el estado. Para evitar esto, deberías usar el hook useEffect (si has trabajado con la versión anterior a los hooks, este hook equivale a componentDidMount, componentDidUpdate y componenteWillUnmount dependiendo como lo configures). Calcular las tareas que van a vencer cuando se monte el componente esto hará que solo se ejecute una vez y no encada render. Solo cuando el componente se monta en el DOM.

Aquí te dejo la documentación sobre este hook.

import React, { useState, useEffect } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

export default function App () {
  const [state, setState] = useState({
    name: '',
    fecha: ''
  })

  const [tasks, setTasks] = useState({ data: JSON.parse(localStorage.getItem('tasks')) || [] })

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

  const handleAdd = () => {
    const data = JSON.parse(localStorage.getItem('tasks'))
    if (data) {
      data.push(state)
      localStorage.setItem('tasks', JSON.stringify(data))
    } else {
      localStorage.setItem('tasks', JSON.stringify([state]))
    }
  }

  const handleChange = (e) => {
    return setState({
      ...state,
      [e.target.name]: e.target.value
    })
  }

  function mostrarTareasPorVencer(){
    tasks.data.forEach(({ fecha, name }) => {
        let remainTime = (new Date(fecha) - new Date() + 1000) / 1000,
        remainDays = Math.floor(remainTime /(3600 * 24))

        if(remainDays <= '00'){
            toast.warn(`${name} esta por vencer!`)
        }
    });
  }

  return (
    <div className="App">
      <ToastContainer />
      <div>
        <h2>Welcome to React</h2>
        <h1>Agrege una tarea</h1>
        <input type="text" name="name" onChange={handleChange} placeholder="Nombre de la tarea"></input>
        <input
          onChange={handleChange}
          type="date" 
          name="fecha" 
          step="1" 
          min={new Date()} 
          max="2022-12-31" 
        />
        <button onClick={handleAdd}>ADD TASK</button>
      </div>
      <div>
        {
          tasks.data.length > 0 ? tasks.data.map((item, index) => {
            return(
              <div className="task" key={index}>
                <h3>{item.name}</h3>
                <p>{item.fecha}</p>
              </div>
            )
          }): <h2>No tienes tareas pendientes</h2>
        } 
      </div>

    </div>
  );
  
}
1
  • Wow muchísimas gracias, me quedo super claro tu explicación y el código me funciona de maravilla, muchísimas gracias.
    – Juan
    Commented el 8 jul. 2020 a las 20:54
1

Intenta

<input type="text" name="name" value={state.name} onChange={handleChange} placeholder="Nombre de la tarea"></input>
1
  • Me sigue ocurriendo el mismo error
    – Juan
    Commented el 8 jul. 2020 a las 5:23

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.