基本上,我有一組動態表,這些表是根據傳遞的值顯示的。如果傳遞了一個空數組,它應顯示“未找到數據”。在我的情況下,當我向表發送數據時,所有表將首先顯示“未找到數據”,然后是實際的表內容。我不確定是什么原因造成的。數據是異步加載的,它顯示沒有找到的數據,然后顯示實際內容。我添加了 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 })); };
在反應JS中異步呈現內容
哈士奇WWW
2022-09-11 20:19:52