我用withAuth HOC包装了一个页面。在同一页面中,我还尝试调用getInitialProps。如果我登录,则getInitialProps函数不会运行(尽管它表明我的withAuth HOC正在运行)。
无论如何,我可以使getInitialProps用于“联系页面”工作,还可以使用withAuth HOC(它也具有getInitialProps函数)吗?
联系
import Layout from "../components/Layout";
import { withAuth } from "../services/withAuth";
class Contact extends React.Component {
static async getInitialProps(ctx) {
console.log("@contact authenticated ", ctx);
return {};
}
render() {
return (
<Layout>
<p>hey there</p>
<a href="mailto:[email protected]">[email protected]</a>
</Layout>
);
}
}
export default withAuth(Contact);
使用Auth HOC 与
import { ME } from "../graphql/queries";
import redirect from "../lib/redirect";
export const withAuth = C => {
class AuthComponent extends React.Component {
static async getInitialProps(ctx) {
const response = await ctx.apolloClient.query({ query: ME });
console.log("@withAuth ", response);
if (!response || !response.data || !response.data.me) {
redirect(ctx, "/");
return {
me: null
};
}
return {
me: response.data.me
};
}
render() {
return <C {...this.props} />;
}
}
return AuthComponent;
};
最佳答案
尝试在HOC的 getInitialProps 中调用C.getInitialProps()
:
export const withAuth = C => {
class AuthComponent extends React.Component {
static async getInitialProps(ctx) {
const response = await ctx.apolloClient.query({ query: ME });
console.log("@withAuth ", response);
if (!response || !response.data || !response.data.me) {
redirect(ctx, "/");
return {
me: null
};
}
// Get component’s props
let componentProps = {}
if (C.getInitialProps) {
componentProps = await C.getInitialProps(ctx);
}
return {
me: response.data.me,
...componentProps
};
}
render() {
return <C {...this.props} />;
}
}
return AuthComponent;
};
我希望这有帮助。
关于reactjs - 在还包含getInitialProps的HOC中使用getInitialProps,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55869475/