javascript - 如何将 Prop 传递给延迟加载组件？

Question

我正在尝试进行网站身份验证。我试图将 Prop 传递给延迟加载模块 但突然我遇到错误“Uncaught (in promise) TypeError: w is not a function”

我正在使用 react with apollo 客户端，react router 和 graphql 查询是完美的工作和惰性组件的渲染 但我不能将 Prop 传递给延迟加载组件

// App.js
const SignIn = lazy(() => import('pages/signin'));

function App(props) {
  // state to represent user signed in to the site
  let [auth, setAuth] = useState(false);

  function handleAuth (boolean) {
    setAuth(boolean);
  }

  return (
    <>
      <main>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route 
              path="/signin"
              auth={auth}
              handleAuth={handleAuth}
              render={props => (<SignIn {...props} /> )}
            />

// signin.js
let auth = props.auth;
let handleAuth = props.handleAuth;

return (
    <ApolloConsumer>
      {client => {
        return (
          <>
            <div className="signin-div">
              <h1>Sign in</h1>

              <form
                onSubmit={async e => {
                  e.preventDefault();
                  const { data } = await client.query({
                    query: SIGNIN_ACCOUNT,
                    variables: { email, password }
                  });
                  if (data.signin) {
                    handleAuth(true);
                  }
                }}
                className="signin-form"
              >

我预计 handleAuth(true) 会完美运行，但我错误地认为 handleAuth(true) 不是一个函数。下面是错误信息 “未捕获( promise )TypeError:w 不是函数”

我应该如何将 props 传递给延迟加载模块？

Answer 1

这里没有火箭科学只是将它的 Prop 直接传递给登录组件，你单独发送 Prop 的原因是因为这些 Prop 是从当时的路线收到的。

 return (
        <>
          <main>
            <Suspense fallback={<div>Loading...</div>}>
              <Switch>
                <Route exact path="/" component={HomePage} />
                <Route 
                  path="/signin"
                  auth={auth}

                  render={props => (<SignIn handleAuth={handleAuth} {...props} /> )}
                />