0

Tengo el siguiente componente que hace parte de un todo list Deseo actualizar el estado cuando el usuario añade una nueva tarea. Sin embargo, me aparece el siguiente error:

"TypeError:Invalid attempt to spread non-iterable intance".

Este es mi código:

this.state = {
      textInputValue: "",

      todos: [
        { text: "buy me a Frontend masters Course", key: 1 },
        { text: "buy me frontend books", key: 2 },
        { text: "buy me a new chair", key: 3 }
      ]
    };    


    addNote() {
    this.setState(prevState => ({
      todos: [
        ...prevState,
        {
          text: this.state.textInputValue,
          key: (this.state.todos.length + 1).toString
        }
      ]
    }));
  }

Alguien podría darme una ayuda?, gracias

1
  • 1
    Hola Christian, creo que deberías cambiar la línea donde tienes el ...prevState por ...prevState.todos Commented el 19 feb. 2020 a las 3:19

1 respuesta 1

1

Para añadir un elemento en un list sin modificarlo tienes que hacer una copia superficial. Es lo que hace "spread".

const myList = [1, 2]
const myListExtended = [...myList, 3] // [1, 2, 3]

Lo mismo con los diccionarios:

const myDict = {a: 1, b: 2}
const myDictExtended = {...myDict, c: 3} // {a: 1, b: 2, c: 3}

Pero no puedes mezclarlos:

const myDict = {a: 1, b: 2}
const myListExtended = [...myDict, 3] // Error

Es lo que occurió aquí.

prevState es un diccionario como this.state y no puedes hacer el spread en list.

Tú tienes un error en tu código. Tienes que poner solo un elemento de prevState.todos en lugar de prevState en setState.

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.