defaultExpandAllRows antd table 与获取不工作反应

Question

我使用 Ant Design table 作为 ui

我的代码有什么问题，table使用本地数据可以自动展开，但是不同的是fetch的结果不能用同样的代码自动展开

我在这里错过了什么？

我不会用好的语言解释，看我的沙盒https://codesandbox.io/s/defaultexpandallrows-antd-table-f1okb

此代码会自动展开

  const data = [
  {
    key: 55,
    name: "John Brown sr.",
    xchildren: [
      { key: 73, address: "New York No. 2 Lake Park" },
      { key: 46, address: "New York No. 2 Lake Park" },
    ],
  },
];

 <Table
      dataSource={data}
      defaultExpandAllRows={true}
      key={data.key}
      expandable={{
        expandedRowRender: (record) => (
          <Table pagination={false} dataSource={record.xchildren}>
            <Column title="Address" dataIndex="address" key="address" />
          </Table>
        ),
      }}
    >
      <Column title="name" dataIndex="name" key="key" />
    </Table>

这不会自动展开table

fetch = () => {
    fetch(`https://api.jsonbin.io/b/61e6fd62ba87c130e3eaa7ef`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({
          dataJSON: data,
        });
      });
  };

  <Table
           <Table
      dataSource={dataJSON}
      defaultExpandAllRows={true}
      key={data.key}
      expandable={{
        expandedRowRender: (record) => (
          <Table dataSource={record.xchildren}>
            <Column
              pagination={false}
              title="Address"
              dataIndex="address"
              key="address"
            />
          </Table>
        ),
      }}
    >
      <Column title="name" dataIndex="name" key="key" />
    </Table>

完整代码

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table,version } from "antd";
const { Column } = Table;

const data = [
  {
    key: 55,
    name: "John Brown sr.",
    xchildren: [
      { key: 73, address: "New York No. 2 Lake Park" },
      { key: 46, address: "New York No. 2 Lake Park" },
    ],
  },
];

class App extends React.Component {
  state = {
    dataJSON: [],
  };

  componentDidMount() {
    const { pagination } = this.state;
    this.fetch({ pagination });
  }

  fetch = () => {
    fetch(`https://api.jsonbin.io/b/61e6fd62ba87c130e3eaa7ef`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({
          dataJSON: data,
        });
      });
  };

  render() {
    const { dataJSON } = this.state;
    return (
      <>
      antd version: {version}
      <p>will automatically expand</p>
        <Table
          dataSource={data}
          defaultExpandAllRows={true}
          key={data.key}
          expandable={{
            expandedRowRender: (record) => (
              <Table pagination={false} dataSource={record.xchildren}>
                <Column title="Address" dataIndex="address" key="address" />
              </Table>
            ),
          }}
        >
          <Column title="name" dataIndex="name" key="key" />
        </Table>
        <hr />
        <p> will not automatically expand</p>
        <Table
          dataSource={dataJSON}
          defaultExpandAllRows={true}
          key={data.key}
          expandable={{
            expandedRowRender: (record) => (
              <Table dataSource={record.xchildren}>
                <Column
                  pagination={false}
                  title="Address"
                  dataIndex="address"
                  key="address"
                />
              </Table>
            ),
          }}
        >
          <Column title="name" dataIndex="name" key="key" />
        </Table>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

你的问题是因为你的 dataJSON 在第一次渲染中是空的，所以 antd 无法识别在下一次渲染中应该扩展哪些行，解决这个问题有几个解决方案：

1- 仅在 dataJSON 已填充时才渲染 table，如下所示：

{dataJSON.length > 0 ? <Table
      dataSource={dataJSON}
      defaultExpandAllRows={true}
      key={data.key}
      expandable={{
        expandedRowRender: (record) => (
          <Table dataSource={record.xchildren}>
            <Column
              pagination={false}
              title="Address"
              dataIndex="address"
              key="address"
            />
          </Table>
        )
      }}
    >
      <Column title="name" dataIndex="name" key="key" />
    </Table> : 'loading...'}

2- 在 expandable 配置中通过 expandedRowKeys 属性控制扩展行，如下所示：

<Table
      dataSource={dataJSON}
      defaultExpandAllRows={true}
      key={data.key}
      expandable={{
        expandedRowKeys: dataJSON.map(o => o.key),
        expandedRowRender: (record) => (
          <Table dataSource={record.xchildren}>
            <Column
              pagination={false}
              title="Address"
              dataIndex="address"
              key="address"
            />
          </Table>
        )
      }}
    >
      <Column title="name" dataIndex="name" key="key" />
</Table>

defaultExpandAllRows antd table 与获取不工作反应

defaultExpandAllRows antd table react with fetch not working

javascript

json

fetch

reactjs

antd