在反应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

使用而不是空数组（沙盒）初始化应用状态的数据：null

this.state = {

  data1: null,

  column1: [],

  data2: null,

  column2: [],

  data3: null,

  column3: []

};

在 DataGrid 中，检查值是否为虚假（计数，但空数组为真实），如果是，则返回（无需呈现任何内容）：methodnullnull

render() {

  const { data, columns } = this.props;

  if (!data) return null;