基本上,我有一组基于传递的值显示的动态表。如果传递的是空数组,则应显示“找不到数据”。就我而言,当我向表发送数据时,所有表将首先显示“未找到数据”,然后显示实际的表内容。我不确定是什么原因造成的。
数据是异步加载的,它显示未找到数据,然后显示实际内容。我添加了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
}));
};
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"
)}
</>
);
}
}
使用null
而不是空数组(sandbox)初始化应用程序状态的数据:
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;
在以上答案中加点。
之所以如此行事,不是因为异步行为,而是React组件的生命周期特性。在这种情况下,它的发生方式是: