0

Can anyone explain what is happening in this code please?

I have a Reactjs module which I have used a ReactDataGrid component in it. The important part of the code is like these:

export default class IssueTable extends Component {
    state = {
        issues: [],
        postHtml: {},
        isFullScreenMode: false,
        loading: true,
        columns: []
    }
    componentDidMount = () => {
        this.props.getIssues(filter).then(response => {
          ...
            //******** PLACE 1 THAT I THINK IT SHOULD WORK, BUT NOT!  **********
            //this.createIssueTableServiceObject() 
          ...          
            this.refreshTable()
        })
    }

    createIssueTableServiceObject() {
        issuleTableService = {
            getColumns: () => this.columns,
            updateTableRow: this.handleRowsUpdated,
            getPostHtml: issueId => this.state.postHtml[issueId],
            getOriginalRow: rowIndex => this.originalIssues[rowIndex],
            getRenderedRow: rowIndex => this.state.issues[rowIndex]
        };
    }

    refreshTable = () => {
        //******** PLACE 2 THAT IT WORKS  **********
        this.createIssueTableServiceObject()
        this.setState({
            ...
        })
    }

    columns = [{
        ....
        formatter: (props) => {
            return (<IssueCell
                {...props}
                issuleTableService= {issuleTableService}
                 />)
        }
    }]
}

export let issuleTableService

Because there is no configuration to send data to the subcomponent of the React Data Grid library (Version ^7.0.0-canary.16), I need to have an export object import it in modules I need like editor which is a property on the column.

The problem is that for the first rows which table is rendering, all things are normal. But when I want to do some changes on the rows, the state of the component in the exported object is like the previous state (before editing):

getPostHtml: issueId => this.state.postHtml[issueId], //**** this.state has not updated values

So I need to move the export object creation to the place 2 in code to execute it and refresh it in every table refreshing.

My question is that what is happening for "this" in the export object? Does it keep a copy of the "this"?

Siamak Ferdos
  • 3,181
  • 5
  • 29
  • 56
  • `export let issuleTableService` - don't do that. This is global state shared by all instances of your class. – Bergi Jun 19 '20 at 12:04
  • The `this` keyword in a function has nothing to do with whether you export an object or not. – Bergi Jun 19 '20 at 12:07
  • @Bergi I couldn't find any way to pass data to a component that is defined as a property name of a component. And if this has nothing to do why it shows the previous object of my component? this points to where? – Siamak Ferdos Jun 19 '20 at 12:21
  • What do you mean by"*a component that is defined as a property name of a component*"? – Bergi Jun 19 '20 at 12:24
  • It's really unclear where and how you are using `IssueTable`, and where and why you are importing `issuleTableService` in other modules. – Bergi Jun 19 '20 at 12:24
  • @Bergi IssueTable is an entry point of a complex table. However I am using a grid library but because of our data, I should implement its feature myself such as filtering, editors, grouping ... So I want to implement something like MVP design which export it functions to let other related component(filter, group, editor, ...) manage my Grid. Otherwise, I will have huge module of codes – Siamak Ferdos Jun 19 '20 at 12:34
  • @Bergi But my question here is not about the design. Maybe later I find a better solution. Here I just want to lnow what happens for "this" in the exported object – Siamak Ferdos Jun 19 '20 at 12:37
  • Well the answer to that question is "Nothing special happens. `this` behaves as always." - if you have a problem with the values that your instance data contains, that's an issue caused by something else. – Bergi Jun 19 '20 at 12:47

0 Answers0