React中MUI X Data Grid插入链接显示[object Object]问题解决

问题原因 #

你直接把React元素（<a>标签）赋值给rows里的symbol字段，DataGrid默认会将这个对象转成字符串输出，所以出现了[object Object]。DataGrid需要通过列配置的自定义渲染方法来插入JSX内容。

解决方案 #

在columns的symbol列配置中添加renderCell属性，用它来渲染跳转链接（推荐用react-router-dom的Link组件，适配单页应用跳转），同时保持rows里的symbol为原始字符串值。

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { DataGrid } from '@mui/x-data-grid';
import ScreenerStocks from '../store/tradeStore';
import '../css/datagrid.css';

const columns = [
  { 
    field: 'symbol', 
    headerName: 'Symbol', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style',
    // 自定义单元格渲染
    renderCell: (params) => {
      return (
        <Link to={`/symbol/${params.value}`}>
          {params.value}
        </Link>
      );
    }
  },
  { 
    field: 'volAvg', 
    headerName: 'volAvg', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style' 
  },
  { 
    field: 'mktCap', 
    headerName: 'mktCap', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style' 
  },
];

export default function Screener() {
    const store = ScreenerStocks();

    useEffect(() => {
        store.fetchStocks();
    }, [])

    const stocksArray = store.stocks.map((stock, index) => ({
        id: index + 1,
        symbol: stock.symbol, // 保持原始字符串值
        volAvg: stock.volAvg,
        mktCap: stock.mktCap,
    }));

  return (
    <BrowserRouter>
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={stocksArray}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 10 },
          },
        }}
        pageSizeOptions={[5, 10]}
        sx= {{
            'MuiDataGrid-columnHeaderTitle': {
                fontWeight:'bold !important',
            }
        }}
        disableRowSelectionOnClick
      />
    </div>
    </BrowserRouter>
  );
}

关键说明 #

• renderCell函数接收params参数，params.value就是当前行symbol字段的原始值。
• 使用Link组件代替原生<a>标签，能实现单页应用的无刷新跳转，避免页面重载。
• 简化了stocksArray的生成逻辑，直接用map返回新数组，不需要额外的push操作。

内容的提问来源于stack exchange，提问作者Ahmed Bn