React.js将新元素推送到嵌套状态

Question

I'm new to javascript and react, I try to push a new element to an array inside the state but there's no success.

state = {
 columns: [
  {
   id: 122,
   items: [{text:'abc'},{text:'cde'}]
  },
  {
   id: 143,
   items: []
  }
 ]
 }

   addItem(columnId,text) {
     const newItem = {text: text}
   //this.setState(...)
   }

Basically, I have an addItem function with given columnId and some text content, I want to push a new item to the items array inside the column with given columnId.

I heard that it'd be much easier with the help of immutability-helper, is that right?

Answer 1

You can get value from state and push to that.

And this.setState makes re-rendering.

addItem(columnId, text) {
    const newItem = {text};   
    let columns = this.state.columns;
    let findColumn = columns.find(({id})=>id === columnId);
    if( findColumn ) {
        findColumn.items.push( newItem );
    }
    else {
        columns.push({id:columnId, items:[newItem]});
    }
    this.setState({columns});
}

If you want tight. We can use destructuring.

addItem(columnId, text) {
    let {columns} = this.state;
    let findColumn = columns.find(({id})=>id === columnId);
    if( findColumn ) {
        findColumn.items.push( {text} );
    }
    else {
        columns.push({id:columnId, items:[{text}]});
    }
    this.setState({columns});
}

Answer 2

You don't need any immutability helper if you learn methods like map , filter and spread syntax or Object.assign . Using some of them (the suitable ones) you can do whatever you want without mutating your state.

const addItem = (columnId, text) => {
  // We are mapping the columns from the state.
  const newColumns = this.state.columns.map(column => {
    // If id does not match just return the column.
    if (column.id !== columnId) return column;
    // Else, return a new column object by using spread syntax.
    // We spread the column (preserve other properties, and create items again
    // using spread syntax. Spread the items, add the new text object.
    return { ...column, items: [...column.items, { text }] };
  });
  // Lastly, set the state with newColumns.
  this.setState({ columns: newColumns });
};

Without comments:

const addItem = (columnId, text) => {
  const newColumns = this.state.columns.map(column => {
    if (column.id !== columnId) return column;
    return { ...column, items: [...column.items, { text }] };
  });
  this.setState({ columns: newColumns });
};

Answer 3

You can create a copy of the state and modify it:

addItem(columnId,text) {
   let newColums = [...this.state.columns]; // Create a copy of the state using spread operator
   newColumns[columnId].items.push({text: text}) // Add the new item
   this.setState({columns:newColumns}) // Set the state
}

Answer 4

 addItem(columnId,text) {
    const { columns } = this.state;
    let newItem = columns.find( column => column.columnId === columnId);
    if(newItem) {
        newItem = {
          ...newItem,
          text: text
       }
    } else {
      newItem = {
        columnId: columnId,
        text: text
      }

    }
    const newColumns = [ ...columns, newItem]
    this.setState({ columns: newColumns })
 }