使用 react-modal-hook 会导致 TypeError: Object(...)() is null答案

【问题标题】：Using react-modal-hook causes TypeError: Object(...)() is null使用 react-modal-hook 会导致 TypeError: Object(...)() is null
【发布时间】：2021-06-21 22:38:52
【问题描述】：

我正在尝试使用一个额外的库来简化 react-modals 的使用。 (https://www.npmjs.com/package/react-modal-hook)。当我使用原始 react-modals (https://www.npmjs.com/package/react-modal) 时一切正常，但是当我尝试使用 react-modal-hook 时出现错误：

TypeError: Object(...)() is null
SignInForm
src/components/login/SignInForm.tsx:18

index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ModalProvider } from "react-modal-hook";

ReactDOM.render(
  <React.StrictMode>
    <ModalProvider>
      <App />
    </ModalProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Home.tsx（从这里我试图打开模式）：

import React from "react";
import { useOktaAuth } from "@okta/okta-react";
import { useHistory } from "react-router-dom";
import { useModal } from "react-modal-hook";
import ReactModal from "react-modal";
import SignInForm from "../components/login/SignInForm";

const Home = () => {
    const { authState } = useOktaAuth();
    const { push } = useHistory()
    const [showModal, hideModal] = useModal(() => (
        <ReactModal isOpen>
          <SignInForm />
        </ReactModal>
      ));
    
    if (authState.isPending) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <span>auth token: </span>
            {authState.accessToken?.accessToken}
            <br />
            {authState.isAuthenticated ?
                <button onClick={() => push('/home')}>Logout</button> :
                <button onClick={showModal}>Login</button>}
        </div>
    )
}
    ;

export default Home;

和 SignInForm.tsx（这个我想显示为模态）：

import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from 'react-hook-form';
import { useOktaAuth } from '@okta/okta-react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import * as yup from "yup";

const SignInForm = () => {

    const schema = yup.object({
        username: yup.string().required("Username is required"),
        password: yup.string().required("Password is required")
    });

    type FormValues = yup.InferType<typeof schema>;

    const { register, handleSubmit, formState: { errors, isValid } } = useForm<FormValues>({ resolver: yupResolver(schema), mode: 'all' });
    const { oktaAuth } = useOktaAuth();

    const onSubmit = async (data: FormValues) => {
        try {
            const response = await oktaAuth.signInWithCredentials({ username: data.username, password: data.password })
            oktaAuth.signInWithRedirect({ sessionToken: response.sessionToken })
        } catch (error) {
            toast.error("Login failed")
        }

    }

    return (
        <>
            <form onSubmit={handleSubmit(onSubmit)}>
...

通过查看该错误，我认为我在 <ModalProvider> 附近的某个地方有问题，对吗？错误所指的行是：

const { oktaAuth } = useOktaAuth();

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

好的，我终于找到了该错误的原因。 Hook useOktaAuth() 只能在 <Security> 内部使用，在我的情况下是

    <ModalProvider>
      <App />
    </ModalProvider>

在<App /> 里面我已经有了Router 组件。我把它改成：

        <Router>
            <Security oktaAuth={oktaAuth} onAuthRequired={onAuthRequired} restoreOriginalUri={restoreOriginalUri}>
                <ModalProvider>
                <Route path='/' exact={true} component={Home} />
                <Route path='/login' render={() => <SignIn />} />
                <Route path='/login/callback' component={LoginCallback} />
                </ModalProvider>
            </Security>
        </Router>

现在一切正常

【讨论】：