javascript - 你应该在 React.useEffect() 中调用 navigate()，而不是在你的组件第一次渲染时

Question

我是 ReactJS 的新手。在页面初始加载时，我想检查 state为空，然后我想重定向到另一个 login Page这是组件代码:

export default function Addblousesalwar() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state)   //null
  if(state === null || state === undefined){
    navigate("/login")
  }

但它显示错误:

You should call navigate() in a React.useEffect(), not when your component is first rendered.

我也尝试过 useEffect 。但是 useEffect 没有被执行。

useEffect(() => {
    if(state === null || state === undefined){
      navigate("/")
    }
  }, []);



useEffect(() => {
    if(state === null || state === undefined){
      navigate("/")
    }
  }, []);

我也试过这个

 useEffect(() => {
    if(state === null || state === undefined){
      navigate("/")
    }
  }, [state]);

这个使用效果也没有触发
请帮我解决一些问题

Answer 1

你应该使用 useEffect 毕竟异步函数，这里的例子:

const userInfo = localStorage.getItem('user-info');
    
async function signUp() 
{
    let item = {name, password, email};
    console.warn(item);
    let result = await fetch("http://127.0.0.1:8000/api/register",{
            method: 'POST',
            body: JSON.stringify(item),
            headers: {
                "content-type": 'application/json',
                "Accept": 'application/json'}
        })
    result  = await result.json();
    console.warn('result', result);
    localStorage.setItem("user-info",JSON.stringify(result));
    navigate("/add");
}

useEffect(() => {
    if (userInfo){
     navigate("/add")   
    }
},[])