reactjs - useNavigate 状态为空？

Question

我试图弄清楚为什么当我将 useNavigate 与我的第一个组件一起使用时，当我渲染第二个组件时，state 出现 null组件？

我已经检查了这里找到的答案，但没有找到任何运气:Cannot pass state using useNavigate() in react router dom v6

这是我的第一个组件的代码:

export default SignInPage(){

const loginEmailRef = useRef('');
const loginPassWordRef = useRef('');
const navigate = useNavigate();

    return(
      <Box className='sign-in-textfield-box' display='flex' flexDirection='column' alignItems='center'>
                <TextField variant='standard' label='email' sx={{ mb: 2, width: '30vw' }} inputRef={loginEmailRef} />
                <TextField variant='standard' label='password' type='password' sx={{ width: '30vw' }} inputRef={loginPassWordRef} />
                <Button
                    sx={{ mt: 5, fontSize: '17px', }}
                    onClick={async (event) => {
                        event.preventDefault();
                        try {
                            const response = await signInUser(loginEmailRef.current.value, loginPassWordRef.current.value);
                            if (response !== 'error') {
                                console.log('response: ', response);

                                ********************************
                                // response does exist as an object with {name: ..., email:... etc}, but when i pass the response with navigate it says null on my other page
                                  navigate('/HomePage', {state: {response}});
                     
                                ********************************
        
                                //   <Link to={'/HomePage'} state={{state: response} }/>
                            } else {
                                alert('Error signing in: ', response);
                            }
                            // history('/HomePage');
                        } catch (error) {
                            console.log('error puhsing to page: ', error);
                        }
                    }}>SignIn</Button>
            </Box>
    );
}

这是我其他页面上的代码:

export default HomePage(props) {


const {state} = useLocation();

useEffect( ()=> {

    // here consolo.log says state: null
    console.log(    
        'state: ', state
    );
}, [])
    return(
     <Box> Something here </Box>
);
}

编辑:

来自响应的响应

Object { 
  providerId: "firebase", 
  proactiveRefresh: {…}, 
  reloadUserInfo: {…}, 
  reloadListener: null, 
  uid: "some-user-id-here", 
  auth: {…}, 
  stsTokenManager: {…}, 
  accessToken: 'some-token-here', 
  displayName: null, 
  email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcc88ffcc8d9cfc8d5d2dbecc9ceccd3c9cfd9f1ddd5d092dfd3d1" rel="noreferrer noopener nofollow">[email protected]</a>", … 
}

​初始页面是 SignInPage()，一旦用户成功签名，他/她将被重定向到 HomePage()

我的App.js:

import { Route, Routes } from 'react-router-dom';
import HomePage from './components/Pages/HomePage/HomePage';
import SignInAndUpPage from './components/Pages/SignInAndUp/SignInAndUpPage';

function App() {
   return (
      <div>
        <Routes>
          <Route path='/' element={<SignInAndUpPage />} />
          <Route path='/HomePage' element={<HomePage />} />
        </Routes>
     </div>
  );
}

export default App;

编辑＃2:signInUser方法:

export async function signInUser(email, password) {
    try {
       
       const response = await signInWithEmailAndPassword(auth, email, password);
       console.log('sign in successful. UID: ', response.user.uid);
       const uid = await loadUserData(response.user.uid)
    
       return response.user;
    } catch (error) {
       console.log('error signin use: ', error.message);
       return 'error';
    }
}

Answer 1

在路由状态中发送的值应该是可序列化的。也许这些 {...} 响应对象值之一包含不可序列化的对象，例如函数。

Response from response

Object { 
  providerId: "firebase", 
  proactiveRefresh: {…}, // <-- serializable?
  reloadUserInfo: {…}, // <-- serializable?
  reloadListener: null, 
  uid: "some-user-id-here", 
  auth: {…}, 
  stsTokenManager: {…},  // <-- serializable?
  accessToken: 'some-token-here', 
  displayName: null, 
  email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e2a5d6e2f3e5e2fff8f1c6e3e4e6f9e3e5f3dbf7fffab8f5f9fb" rel="noreferrer noopener nofollow">[email protected]</a>",
  … 
}

例如，函数通常使用动词命名，例如函数正在执行某些操作。 reloadUserInfo 听起来像是调用了一个操作。

不要盲目地在路由状态中传递整个响应对象，而是仅选择接收路由所需的属性。

示例:

const response = await signInUser(
  loginEmailRef.current.value,
  loginPassWordRef.current.value
);

if (response !== 'error') {
  console.log({ response });

  // response does exist as an object with {name: ..., email:... etc}
  const { accessToken, email, name, uid } = response;
  const state = { accessToken, email, name, uid };
  navigate('/HomePage', { state });
} ...