在React中，你应该在React.useEffect()中调用navigate()，而不是在组件首次渲染时调用。

Question

我对ReactJS不熟悉。在页面初始加载时，我想要检查state是否为空，如果是，则想要重定向到另一个登录页面

这是组件代码：

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

这个useEffect也没有触发，请帮我提供一些解决方案

- rafekas

---

使用 console.log(state) 来调试它是什么。 - Lin Du

useEffect 钩子保证在组件挂载时至少触发一次回调函数。导航有问题吗？检查效果回调中的 state 值，看看条件为什么不满足。此外，Addblousesalwar 似乎不是 React 函数组件或自定义钩子，因此无法使用 React 钩子。 - Drew Reese

状态为 null。 - rafekas

你能否创建一个正在运行的codesandbox，以重现这个导航/挂载问题，以便我们可以实时检查和调试？ - Drew Reese

Answer 1

如评论中所提到的，你应该提供一个codesandbox或者更多的代码。

话虽如此，我猜 'state' 既不是 undefined 也不是 null，它是一个 [] （通常是默认值 const [state, setState] = useState([])），这就是你认为它不起作用的原因。

尝试一下：

useEffect(() => {
    if(!state.length){
      navigate("/")
    }
  }, []); 

- yih613

Answer 2

你应该在所有异步函数之后使用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")   
    }
},[])

- Nurdi Yanto

Answer 3

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

there is

- Bruno Lisboa

---

state == null || state == undefined 是多余的。只需要写成 == null 即可。 - General Grievance

Answer 4

export default function Addblousesalwar() {
    const navigate = useNavigate();
    const { state } = useLocation();

    //I used useLayoutEffect instead of useEffect and the below turned into warning instead of an error

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

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

- Temitayo

---

对我来说，这会改变地址栏中的URL，但会渲染组件Addblousesalwar。 - undefined

Answer 5

尝试将“state”和“navigate”添加到您的“useEffect”依赖项中。也许它会解决您的问题。

- DOBeR

---

您的答案可以通过提供额外的支持信息来改进。请编辑以添加更多细节，例如引用或文档，以便他人可以确认您的答案是正确的。您可以在帮助中心中找到有关如何撰写良好答案的更多信息。 - Community