在反应JS中异步呈现内容

Question

基本上，我有一组动态表，这些表是根据传递的值显示的。如果传递了一个空数组，它应显示“未找到数据”。在我的情况下，当我向表发送数据时，所有表将首先显示“未找到数据”，然后是实际的表内容。我不确定是什么原因造成的。

数据是异步加载的，它显示没有找到的数据，然后显示实际内容。我添加了 setInterval 来展示这种异步特性

沙盒：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

    }));

  };

Answer 1

在上面的答案中补充几点。它以这种方式运行的原因不是因为异步行为，而是 React 组件的生命周期性质。数据网格以数据的初始状态呈现，即空[]数组。不显示任何数据，因为空 [] 数组在此循环中传递。然后，您将在组件DidMount中设置状态。为了显示效果，数据网格再次使用实际数据重新呈现。

Answer 2

使用而不是空数组（沙盒）初始化应用状态的数据：nullthis.state = {&nbsp; data1: null,&nbsp; column1: [],&nbsp; data2: null,&nbsp; column2: [],&nbsp; data3: null,&nbsp; column3: []};在 DataGrid 中，检查值是否为虚假（计数，但空数组为真实），如果是，则返回（无需呈现任何内容）：methodnullnullrender() {&nbsp; const { data, columns } = this.props;&nbsp; if (!data) return null;