🧐[问题] ProTable如何使用dataSource而非request来更新数据？

[namoshizun]

🧐 问题描述

在protable的文档中虽然解释了 dataSource: Table 的数据，protable 推荐使用 request 来加载，个人理解是当前两者都可以用于设置表内数据。然而个人测试下来发现似乎只设置dataSource的话，table初始还是空白的，如下：

import React, { useState } from 'react';
import { EditableProTable } from '@ant-design/pro-table';

interface Item {
  key: string;
  name: string;
  age: number;
  address: string;
}

const originData: Item[] = [];
for (let i = 0; i < 10; i++) {
  originData.push({
    key: i.toString(),
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const App: React.FC = () => {
  const [data, setData] = useState(originData);

  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '25%',
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '40%',
    },
  ];

  return (
    <EditableProTable
      size='small'
      bordered
      rowKey='key'
      dataSource={data}
      columns={columns}
    />
  );
};

export default App;

[Wxh16144]

我大概看了一眼 <EditableProTable /> 源码, 应该通过 value 或者 defaultValue 来设置 data, 而不是 dataSource 来设置.

[namoshizun]

我大概看了一眼 <EditableProTable /> 源码, 应该通过 value 或者 defaultValue 来设置 data, 而不是 dataSource 来设置.

谢谢~ 的确是的，如果dataSource的确不生效，文档也该更新下的。。 👀

[github-actions]

Hello @namoshizun. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @namoshizun，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

你好！感谢你的提问。针对你的问题，根据我的了解，EditableProTable 组件确实应该使用 value 或者 defaultValue 来设置数据，而不是 dataSource。这可能是因为在组件内部，它会使用 value 或者 defaultValue 来渲染表格的数据。

以下是一个修改后的代码示例：

import React, { useState } from 'react';
import { EditableProTable } from '@ant-design/pro-table';

interface Item {
  key: string;
  name: string;
  age: number;
  address: string;
}

const originData: Item[] = [];
for (let i = 0; i < 10; i++) {
  originData.push({
    key: i.toString(),
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const App: React.FC = () => {
  const [data, setData] = useState(originData);

  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '25%',
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '40%',
    },
  ];

  return (
    <EditableProTable
      size='small'
      bordered
      rowKey='key'
      value={data}
      columns={columns}
    />
  );
};

export default App;

值得注意的是，我们将 dataSource 替换为了 value，这样就可以正确地在表格中显示数据了。

希望能帮助到你！如果还有其他问题，请随时向我提问。