UI not updating after successful Document.remove()

help
1

Hi Guys,

Need help on this, I don’t know why the UI doesn’t update after successful document remove via Meteor.call()

import React, { Component } from 'react'
import DocumentItem from './document_item'
import TableDocItems from './table_doc_items'

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      docItems: []
    }
  }

  componentDidMount () {
    this.getDocItems()
  }

  handleDelete (id) {
    if (confirm('Are you sure?')) {
      Meteor.call('documents.remove', id, (err, result) => {        
        if (err) {
          console.log(err)
        } else {
          this.getDocItems()
        }
      })
    }
  }

  getDocItems () {
    const docItems = this.props.docs.map((doc, i) => {
      return (
        <DocumentItem
          key={i}
          doc={doc}
          handleDelete={this.handleDelete.bind(this, doc._id)} />
      )
    })

    this.setState({docItems})
  }

  render () {
    return (
      <div class='col-sm-12'>
        <h4>My Documents</h4>
        <TableDocItems docItems={this.state.docItems} />
      </div>
    )
  }
}

export default Home

TIA!

3

The issue with your code is that after successful document removal, you are calling the getDocItems function to update the docItems state. However, the getDocItems function is asynchronous, which means it may not have completed by the time you call setState. This can lead to the UI not being updated properly.

To fix this, you can update the handleDelete function to remove the deleted document from the docItems state instead of calling getDocItems again.