Estoy usando una biblioteca externa para crear un tablero de tareas y lo que quiero lograr es agregar una nueva columna al hacer clic y agregar el botón de columna. Tengo problemas para agregar la columna, tengo la columna recién creada pero no se agrega a la matriz. ¿Qué estoy haciendo mal y cómo puedo insertar la columna recién creada? Aquí está mi código:
onAddColumn = () => { const newColumn: TaskBoardColumnModel = { id: this.state.columnsData.length + 1, title: 'New Column', status: 'new', edit: true, }; console.log(this.state.columnsData); this.setState({ columsData: newColumn, }); console.log(this.state.columsData); }; }Su principal problema es la forma en que actualiza su estado. Esto es lo que tienes:
this.setState({ columsData: newColumn, }); Este fragmento de código establecerá el estado en columsData: newColumn , lo cual es incorrecto por varias razones:
Esto es lo que debería ser:
this.setState({ columnsData: [...this.state.columnsData, newColumn], });Esto mantendrá su estado actual y agregará la nueva columna a su lista existente.
Tiene un error tipográfico en columsData . Además, columnsData debe ser una matriz, por lo que probablemente necesite establecer el nuevo estado en el anterior más la nueva columna.
por ejemplo, algo como:
this.setState({ columnsData: [...this.state.columnsData, newColumn], }); this.setState({ if(this.state.columnsData && this.state.columnsData.length>0) { columnsData: [...this.state.columnsData, newColumn], } });