这个问题通常出现在使用firebase / firestore API进行数据获取的情况下。root cause在于初次加载进入页面时,服务端渲染 (SSR) 使我们的getInitialProps在服务端被调用从而导致我们的异步代码不会执行。因此我们需要在客户端的componentDidMount周期内进行,判断当前页面是在客户端还是服务端,并进行处理在客户端初次渲染时再次拉取数据,而不是仅限服务端。
例如:
import { firebase } from "../lib/firebase";
function HomePage(props) { return (
HomePage.getInitialProps = async ({ req }) => { // 如果在服务端,请等待数据完成加载 if (req) { // Create a reference to the cities collection const citiesRef = firebase.firestore.collection('cities'); const snapshot = await citiesRef.get(); const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data })); return { cities: data }; }
return { cities: [] }; };
class HomePageContainer extends React.Component { state = { cities: this.props.cities };
async componentDidMount() { // 如果在客户端,并且没有数据,请等待数据完成加载 if (!this.state.cities.length) { // Create a reference to the cities collection const citiesRef = firebase.firestore.collection('cities'); const snapshot = await citiesRef.get(); const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data })); this.setState({ cities: data }); } }
render() {
return
export default HomePageContainer;