在React中等待数据填充可以通过以下几种方式实现:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
isLoading: true
};
}
componentDidMount() {
// 模拟异步请求数据
setTimeout(() => {
const data = fetchData(); // 获取数据的函数
this.setState({ data, isLoading: false });
}, 2000);
}
render() {
const { data, isLoading } = this.state;
if (isLoading) {
return <div>Loading...</div>;
}
return <div>{data}</div>;
}
}
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<div>
<React.Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</React.Suspense>
</div>
);
}
以上是在React中等待数据填充的几种常见方式,根据具体情况选择适合的方式来实现。
云+社区技术沙龙[第17期]
企业创新在线学堂
企业创新在线学堂
DBTalk技术分享会
云+社区技术沙龙[第8期]
云原生正发声
腾讯云GAME-TECH沙龙
算法大赛
Elastic 实战工作坊
GAME-TECH
云+社区技术沙龙[第9期]
领取专属 10元无门槛券
手把手带您无忧上云