如何在 React Component 构造函数中设置此状态

Question

我仍然学到很多 React JavaScript，现在我不明白如何创建这个初始状态。

在 constructor 这里的代码中，我想通过运行添加到 state 这一行：

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

直接在我想添加更多 state 变量之后：

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

现在的问题是 state 不包含对 CsvViewer 的第一次调用。我如何添加状态调用 CsvViewer 和其他状态变量？

代码：

    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;

Answer 1

您可以像这样在一种状态下设置 csvViewer、filters、sortColumn 和 sortDirection。

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

第二个 this.state 会覆盖你的第一个 this.state，你可以在一个状态下拥有所有内容。

Answer 2

有几个选项可用于向对象添加属性。这是我通常会做的，使用 spread syntax。它将创建 parse 返回对象的浅表副本，并添加您定义的额外属性：

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

Object.assign 可以用来做类似的事情：

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

或者您可以一次只添加一个属性：

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

如何在 React Component 构造函数中设置此状态

How to in React Component constructor set this state

javascript

constructor

reactjs