如何将道具传递给延迟加载的组件?

时间:2019-06-05 04:10:18

标签: javascript reactjs react-router

我正在尝试进行网站认证。我试图将道具传递给延迟加载模块 但是突然我遇到错误“未捕获(承诺)TypeError:w不是函数”

我正在使用与阿波罗客户端进行反应,对路由器进行反应 和graphql查询可以正常工作,懒惰组件的渲染也可以 但我无法将道具传递给延迟加载组件

// 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)不是一个函数。以下是错误消息 “未捕获(承诺)TypeError:w不是函数”

我应该如何将道具传递给延迟加载模块?

1 个答案:

答案 0 :(得分:1)

这里没有火箭科学会直接将道具传递给登录组件,您单独发送道具的原因是因为这些道具是从那时开始接收的那些道具。

if(words.add(obj)){
   System.out.print("success!");
}