0

Estoy creando una "Lista de tareas" pero me sale este error:

"Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops"

Este es mi código:

import React from 'react';
import './App.css';

import List from './Components/List';
import TaskForm from './Components/TaskForm';

import TaskList from './Sample/TaskList.json'
class App extends React.Component{
  
  state = {
    taskLists: TaskList
  }
  
  addTask = (title,description) => {
    const newTask = {
      title: title,
      description: description,
      id: this.state.taskLists.length
    }
    this.setState({
      taskLists : [...this.state.taskLists, newTask]
    })
  }

  render(){
    return(
      <div>
        <TaskForm addTask={this.addTask} />
        <List tasks={this.state.taskLists} />
      </div>
    );
  }
}

export default App; 

Apareció cuando agregué esta parte de código:

this.setState({
      taskLists : [...this.state.taskLists, newTask]
    })
1

1 respuesta 1

2

No puedes utilizar state.taskLists como referencia para modificar state.taskLists mediante setState, produciendo una actializacion en loop.

Si deseas usar el valor anterior usa el formato de funcion y el estado previo referenciado:

this.setState( prevState) => ({
      taskLists : [...prevState.taskLists, newTask]
    })
)

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.