defaultExpandAllRows antd 表对 fetch 不起作用作出反应

Question

我使用 Ant Design 表作为 ui

我的代码有什么问题，使用本地数据的表可以自动扩展，但是不同的是，同样的代码，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>

这不会自动扩展表

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，如下所示：

{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...'}

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

<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>