我想使用数据库中的值在react ag-grid中动态设置列标题。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { AgGridReact } from 'ag-grid-react';

const MyGridComponent = () => {
  const [columnDefs, setColumnDefs] = useState([]);

  useEffect(() => {
    // 发送请求获取数据库中的值
    axios.get('/api/getColumnTitles')
      .then(response => {
        // 将获取到的值存储在状态中
        setColumnDefs(response.data);
      })
      .catch(error => {
        console.error('Error fetching column titles:', error);
      });
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: '400px', width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs.map(title => ({ headerName: title }))}
        rowData={...} // 设置行数据
      />
    </div>
  );
};

export default MyGridComponent;