Асинхронный рендеринг контента в reactJS

Question

В основном у меня есть набор динамических c таблиц, которые отображаются на основе переданных значений. Если передан пустой массив, он должен показать, что данные не найдены. В моем случае, когда я отправляю данные в таблицу, все таблицы сначала будут показывать «Данные не найдены», а затем фактическое содержимое таблицы. Я не уверен, чем это вызвано.

Данные загружаются асинхронно, не отображаются данные, а затем фактическое содержимое. Я добавил setInterval, чтобы показать эту асинхронную природу.

Sandbox: https://codesandbox.io/s/react-table-row-table-ryiny?file= / src / index. js: 0-1322

Кто-нибудь может мне помочь?

Родитель

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

const d1 = [{ name: "test", age: "20" }, { name: "test1", age: "15" }];
const d2 = [{ area: "area", pin: "123" }, { area: "area1", pin: "1245" }];
const c1 = [
  { Header: "Name", accessor: "name" },
  { Header: "Age", accessor: "age" }
];
const c2 = [
  { Header: "Area", accessor: "area" },
  { Header: "Pin", accessor: "pin" }
];
const d3 = [];
const c3 = [];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: [],
      column1: [],
      data2: [],
      column2: [],
      data3: [],
      column3: []
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        data1: d1,
        column1: c1
      });
    }, 2000);
    setTimeout(() => {
      this.setState({
        data2: d2,
        column2: c2
      });
    }, 2500);
    this.setState({
      data3: d3,
      column3: c3
    });
  }

  render() {
    return (
      <>
        <DataGrid data={this.state.data1} columns={this.state.column1} />
        <DataGrid data={this.state.data2} columns={this.state.column2} />
        <DataGrid data={this.state.data3} columns={this.state.column3} />
      </>
    );
  }
}

Ребенок

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMore: false
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      showMore: !prevState.showMore
    }));
  };

  formatData = () => {
    let arr = [];
    if (this.props.data && this.props.data.length > 0)
      arr = this.state.showMore ? this.props.data : this.props.data.slice(0, 2);
    return arr;
  };

  render() {
    const { showMore } = this.state;
    const { data, columns } = this.props;
    const showLink = data.length > 2;
    const subset = this.formatData();
    return (
      <>
        {showLink && (
          <button onClick={this.toggleState}>
            Show {showMore ? "Less" : "More"}
          </button>
        )}
        {data && data.length > 0 ? (
          <ReactTable
            showPagination={false}
            data={subset}
            columns={columns}
            minRows={0}
            NoDataComponent={() => null}
            loading={false}
          />
        ) : (
          "No data found"
        )}
      </>
    );
  }
}

Answer 1

Добавление нескольких пунктов к приведенному выше ответу.

Причина, по которой он вел себя таким образом, не из-за асинхронного поведения, а из-за характера жизненного цикла компонента React. Который в этом случае имеет место как :

• DataGrid визуализируется с начальным состоянием данных, то есть с пустым массивом [].
• Данные не отображаются, потому что в этом цикле передается массив empty [].
• Затем вы устанавливаете состояние в componentDidMount.
• Чтобы показать эффект, Datagrid снова перерисовывается с фактическими данными.

Answer 2

Инициализировать данные состояния приложения с помощью null вместо пустого массива ( песочница ):

this.state = {
  data1: null,
  column1: [],
  data2: null,
  column2: [],
  data3: null,
  column3: []
};

В DataGrid method проверьте, не является ли значение ложным (null подсчитывается, но пустой массив является правдой) и возвращает null (нечего отображать), если это:

render() {
  const { data, columns } = this.props;

  if (!data) return null;