useNavigate 状态为空？

Question

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

我已经检查了在这里找到的答案，但没有找到任何运气：

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

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>
);
}

编辑：

来自response

的回应

Object { 
  providerId: "firebase", 
  proactiveRefresh: {…}, 
  reloadUserInfo: {…}, 
  reloadListener: null, 
  uid: "some-user-id-here", 
  auth: {…}, 
  stsTokenManager: {…}, 
  accessToken: 'some-token-here', 
  displayName: null, 
  email: "t3@testingPurpouseMail.com", … 
}

初始页面是SignInPage()然后一旦用户成功签名he/she将被重定向到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

路由状态中发送的值应该是可序列化的。也许这些 {...} 响应对象值之一包含一个 non-serializable 对象，就像一个函数。

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: "t3@testingPurpouseMail.com",
  … 
}

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

不是盲目地传递路由状态中的整个响应对象，select只传递接收路由所需的属性。

示例：

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 });
} ...

useNavigate 状态为空？

useNavigate state is null?

reactjs

react-router-dom