defaultExpandAllRows antd table react with fetch not working

Question

i use Ant Design table as ui

what's wrong with my code, table using local data can be automatically expanded, but it's different for the results from fetch can't automatically expand with the same code

what am i missing here?

i can't explain with good language, look at my sandbox https://codesandbox.io/s/defaultexpandallrows-antd-table-f1okb

this code will automatically expand

  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>

this will not automatically expand 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>

full code

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

Your problem is because your dataJSON is empty in the first render, so antd doesn't recognize which rows should be expanded in the next renders, to solve the problem there are couple of solutions:

1- render your table only when dataJSON has been filled, like this:

{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- controll expanded rows by expandedRowKeys property on the expandable config, like this:

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