React Material Table自动填充rowData属性实现方法及props.value未定义问题解决

我来帮你搞定这个问题！先拆解下你的代码里的问题，再一步步实现自动填充的功能：

1. 先修复语法错误（props.value异常的直接诱因） #

你的editComponent里的onClick回调少了闭合的}，这会导致组件渲染失败，进而出现props.value未定义的情况。先把这个小问题修正：

onClick={()=> handleClick(props)} // 补上缺失的闭合括号

2. 解决props.value未定义的问题 #

进入编辑模式时，如果是新建行，fullName字段初始值为空，props.value会是undefined；如果是编辑已有行，也可能因组件渲染时机问题出现临时未定义。我们可以给TextField的value设置一个兜底值：

value={props.value || `${props.rowData.name || ''} ${props.rowData.surname || ''}`.trim()}

这样既会优先使用用户手动修改后的props.value，也会在初始状态下用name和surname拼接的值作为默认显示。

3. 实现实时自动填充fullName的功能 #

如果你希望用户修改name或surname时，fullName能实时同步更新，可以在fullName的editComponent里用useEffect监听rowData中name和surname的变化，自动触发更新：

import { useEffect } from 'react';

// ... 其他代码
{
  title: 'Full name',
  field: 'fullName',
  editComponent: (props) => {
    // 监听name/surname变化，自动计算并更新fullName
    useEffect(() => {
      const autoFullName = `${props.rowData.name || ''} ${props.rowData.surname || ''}`.trim();
      // 避免无限循环：只有当自动计算值和当前props.value不同时才更新
      if (autoFullName !== props.value) {
        props.onChange(autoFullName);
      }
    }, [props.rowData.name, props.rowData.surname]);

    return (
      <div onClick={() => handleClick(props)}>
        <TextField
          value={props.value || `${props.rowData.name || ''} ${props.rowData.surname || ''}`.trim()}
          onChange={(e) => props.onChange(e.target.value)}
          placeholder="Full name"
        />
      </div>
    );
  },
}

4. 可选：仅在保存时自动计算（无需实时更新的场景） #

如果不需要实时同步，只需要在用户保存行数据时自动生成fullName，可以用editable配置里的onRowUpdate和onRowAdd方法：

<MaterialTable
  // ... 其他配置
  editable={{
    onRowUpdate: (newData, oldData) =>
      new Promise((resolve, reject) => {
        // 保存前自动计算fullName
        newData.fullName = `${newData.name} ${newData.surname}`.trim();
        // 这里可以添加更新数据的逻辑（比如调用API）
        setTimeout(() => {
          const updatedData = [...data];
          updatedData[data.indexOf(oldData)] = newData;
          setData(updatedData);
          resolve();
        }, 600);
      }),
    onRowAdd: (newData) =>
      new Promise((resolve, reject) => {
        // 添加新行时自动计算fullName
        newData.fullName = `${newData.name} ${newData.surname}`.trim();
        setTimeout(() => {
          setData([...data, newData]);
          resolve();
        }, 600);
      })
  }}
/>

完整修改后的代码示例 #

import React, { useEffect } from 'react';
import MaterialTable from 'material-table';
import TextField from '@mui/material/TextField';

const handleClick = (props) => {
  console.log('当前行数据:', props.rowData);
};

export default function App() {
  const [data, setData] = React.useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, fullName: 'Mehmet Baran' },
    { name: 'Zerya', surname: 'Baran', birthYear: 2017, birthCity: 34, fullName: 'Zerya Baran' },
  ]);

  return (
    <MaterialTable
      title="Simple Action Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
        {
          title: 'Full name',
          field: 'fullName',
          editComponent: (props) => {
            useEffect(() => {
              const autoFullName = `${props.rowData.name || ''} ${props.rowData.surname || ''}`.trim();
              if (autoFullName !== props.value) {
                props.onChange(autoFullName);
              }
            }, [props.rowData.name, props.rowData.surname]);

            return (
              <div onClick={() => handleClick(props)}>
                <TextField
                  value={props.value || `${props.rowData.name || ''} ${props.rowData.surname || ''}`.trim()}
                  onChange={(e) => props.onChange(e.target.value)}
                  placeholder="Full name"
                />
              </div>
            );
          },
        },
      ]}
      data={data}
      actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        }
      ]}
      editable={{
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            newData.fullName = `${newData.name} ${newData.surname}`.trim();
            setTimeout(() => {
              const updatedData = [...data];
              updatedData[data.indexOf(oldData)] = newData;
              setData(updatedData);
              resolve();
            }, 600);
          }),
        onRowAdd: (newData) =>
          new Promise((resolve, reject) => {
            newData.fullName = `${newData.name} ${newData.surname}`.trim();
            setTimeout(() => {
              setData([...data, newData]);
              resolve();
            }, 600);
          })
      }}
    />
  );
}

这样修改后，你就能实现fullName的自动填充，同时解决props.value未定义的问题啦！

内容的提问来源于stack exchange，提问作者Trung Phan