How to in React Component constructor set this state-CodePudding

I still lern much React JavaScript and now I cant understand how to create this initial state

In the constructor here in the code I want to add to state by running this line;

    this.state = CsvViewer.parse(props.data);

And direct after I want to add more state variables like this;

    this.state = {
        filters: {},
        sortColumn: null,
        sortDirection: null,
    };

The problem now is that state doe's not contain the first call to CsvViewer. How can I add to state both the call to CsvViewer and the other state varibales?

code:

    class CsvViewer extends Component {
        static parse(data) {
            const rows = [];
            const columns = [];
    
            new CSV(data).forEach(array => {
                if (columns.length < 1) {
                    array.forEach((cell, idx) => {
                        columns.push({
                            key: `key-${idx}`,
                            name: cell,
                            resizable: true,
                            sortable: true,
                            filterable: true,
                        });
                    });
                } else {
                    const row = {};
                    array.forEach((cell, idx) => {
                        row[`key-${idx}`] = cell;
                    });
                    rows.push(row);
                }
            });
            return { rows, columns };
        }
    
        constructor(props) {
            super();
            this.state = CsvViewer.parse(props.data);
            this.state = {
                filters: {},
                sortColumn: null,
                sortDirection: null,
            };
        }


    UNSAFE_componentWillReceiveProps(nextProps) {
        // TODO
        this.setState(CsvViewer.parse(nextProps.data));
    }

    handleGridSort = (sortColumn, sortDirection) => {
        // this.setState({ sortColumn, sortDirection });
    };

    render() {
        const { rows, columns } = this.state;
        const { height } = this.props;
        return (
            <ReactDataGrid
                enableCellAutoFocus={false}
                columns={columns}
                rowsCount={rows ? rows.length: 0}
                rowGetter={i => rows[i]}
                minHeight={height || 650}
                onGridSort={this.handleGridSort}
            />
        );
    }
}

export default CsvViewer;

CodePudding user response：

There's a few options for adding properties to an object. Here's the one i would usually do, using spread syntax. It will create a shallow copy of the object returned by parse, and add in the extra properties you define:

this.state = {
  ...CsvViewer.parse(props.data),
  filters: {},
  sortColumn: null,
  sortDirection: null,
}

Object.assign can be used to do something similar:

this.state = Object.assign({}, CsvViewer.parse(props.data), {
  filters: {},
  sortColumn: null,
  sortDirection: null,
});

Or you could just add the individual properties one at a time:

this.state = CsvViewer.parse(props.data);
this.state.filters = {};
this.state.sortColumn = null;
this.state.sortDirection = null;

CodePudding user response：

You can set csvViewer, filters, sortColumn, and sortDirection under one state like so.

    constructor(props) {
        super();
        this.state = {
            csvViewer: CsvViewer.parse(props.data),
            filters: {},
            sortColumn: null,
            sortDirection: null,
        };
    }

The second this.state will overwrite your first this.state, you can have everything under one state.