REACT / AG-GRID：检索数据后动态设置 columnDefs

Question

在componentDidMount()函数中，我使用AXIOS检索数据，一旦收到，我试图在检索数据后更改我的AG-GRID的列标题名称，但标题名称不受影响。

请参阅以下代码中的this.gridOptions.api.setColumnDefs(columnDefs)行。

var columnDefs = [
    { headerName: "column0", field: "column0", width: 300 },
    { headerName: "column1", field: "column1", width: 100 },
    { headerName: "column2", field: "column2", width: 100 },
    { headerName: "column3", field: "column3", width: 100 },
    { headerName: "column4", field: "column4", width: 100 },
    { headerName: "column5", field: "column5", width: 100 },
];

var PARMS = '';

class Home extends React.Component {
    state = {
        columnDefs: columnDefs,
        header: {},
        isLoading: false,
        error: null
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        axios.get(API + PARMS)
            .then(fubar => {
                const rowData = fubar.data.results;
                this.setState({ rowData });
                const headerRow = fubar.data.header;
                columnDefs[0].headerName = headerRow.column0;
                columnDefs[1].headerName = headerRow.column1;
                columnDefs[2].headerName = headerRow.column2;
                columnDefs[3].headerName = headerRow.column3;
                columnDefs[4].headerName = headerRow.column4;
                columnDefs[5].headerName = headerRow.column5;

                this.gridOptions.api.setColumnDefs(columnDefs);
            })
            .catch(error => this.setState({
                error,
                isLoading: false
            }));
    }

RENDER() 是：

render() {
    const { isLoading, rowData, columnDefs } = this.state;

    return (
        <div className="ag-theme-balham" style={{ height: '525px', width: '920px' }} >
            <h2>{heading}</h2>

            <AgGridReact
                columnDefs={columnDefs}
                rowData={rowData}>
            </AgGridReact>
        </div>

    );
}

我认为上面的代码正在做什么（或试图做什么）：

• 定义列定义
• 网格是从列定义呈现的
• 数据来源于
• 重新定义列定义
• 网格是（或应该）重新渲染

但它没有发生。 在我的完美世界中，我宁愿：

• 检索数据
• 定义列
• 渲染网格

但有人告诉我“它不是那样工作的”。

Answer 1

我的解决方案是对数组进行两个定义，一个设置为状态对象，另一个设置为独立变量。 当数据刷新时，独立变量更新，然后用于替换状态对象。

有没有更好的办法？

var columnDefsNew = [
    { headerName: "", field: "column0", width: 300, },
    { headerName: "", field: "column1", width: 100 },
    { headerName: "", field: "column2", width: 100 },
    { headerName: "", field: "column3", width: 100 },
    { headerName: "", field: "column4", width: 100 },
    { headerName: "", field: "column5", width: 100, }];

class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: [
                { headerName: "", field: "column0", width: 300 },
                { headerName: "", field: "column1", width: 100 },
                { headerName: "", field: "column2", width: 100 },
                { headerName: "", field: "column3", width: 100 },
                { headerName: "", field: "column4", width: 100 },
                { headerName: "", field: "column5", width: 100 }],
            rowData: null,
            isLoading: false,
            error: null
        };
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        axios.get(API + PARMS)
            .then(fubar => {
                const headerRow = fubar.data.header;
                const rowData = fubar.data.results;

                this.setState({ rowData });

                columnDefsNew[0].headerName = headerRow.column0;
                columnDefsNew[1].headerName = headerRow.column1;
                columnDefsNew[2].headerName = headerRow.column2;
                columnDefsNew[3].headerName = headerRow.column3;
                columnDefsNew[4].headerName = headerRow.column4;
                columnDefsNew[5].headerName = headerRow.column5;

                this.setState({ columnDefs: columnDefsNew });
            })
            .catch(error => this.setState({
                error,
                isLoading: false
            }));
    }

    render() {
        const { isLoading, rowData, columnDefs } = this.state;

        return (
            <div className="ag-theme-balham" style={{ height: '525px', width: '900px' }} >
                <h2>{heading}</h2>

                <AgGridReact
                    columnDefs={columnDefs}
                    rowData={rowData}>
                </AgGridReact>
            </div>

        );
    }
}

export default Home;

Answer 2

我们可以使用以下函数在检索 api 数据后设置动态列

在这里，我使用了 gridApi 的getColumnDefs() 和 setColumnDefs()

const dynamicallyConfigureColumnsFromObject = (anObject, ticketGridRef) => {
        const colDefs = ticketGridRef.current.api.getColumnDefs()
        const keys = Object.keys(anObject)
        keys.forEach(key => {
            if (colDefs.some(l => l.field === key) === false) {
                colDefs.push({ field: key, filter: 'agTextColumnFilter', headerName: key})
            }
        })
        ticketGridRef.current.api.setColumnDefs(colDefs)
    }