Question 258173 in Reactjs Question posted in
The new location for the React Documentation can be found here.

useEffect triggers after second state change Reactjs

I want this useEffect to take me to another screen if those two values meet the conditions.

useEffect(() => {
    if(userAdded == true && isOpen== false){
      return navigate("/login");
    }
  },[userAdded, isOpen])`

I use setUserAdded if an axios call returns a specific response

axios.put("https:xxx", data, {
        headers: headers,
      })
      .then(function (response) {
        setContent(response.data);
        console.log(response.data);
       if (content.includes("agregado")){
          setUserAdded(true);
        }
        togglePopup(); /*I want the useEffect to take me to /login after I close this*/
        
      })

and isOpen is a state I use to control a popup component with togglePopup(). The navigate function works only after I open and close the popup a second time, then it takes me to /login.

Any ideas of what I might be doing wrong?

Tags:

2

Answers


  1. 0

    The problem seems to come from here

    /** You set the value of `content`*/
setContent(response.data);

// ...

/** You the check the value of content directly after */
if (content.includes("agregado")){
 setUserAdded(true);
}

    Using the setter function of a state is not synchronous, meaning that content will not be already equal to response.data when we enter the condition. But when you redo the action of opening and closing the popup, content will have the correct value from before, so it will work.

    The best workaround is to remove the condition and put it in a use effect

    useEffect(() => {
if (content?.includes("agregado")){
 setUserAdded(true);
}
}, [content])
    Login or Signup to reply.
  2. 0

    The first issue is in your axios then clause.

    axios.put("https:xxx", data, {
  headers: headers,
})
.then(function (response) {
  setContent(response.data);
  console.log(response.data);
  if (response.data.includes("agregado")){ // <-- here is the correct fix
    setUserAdded(true);
  }
  togglePopup(); /*I want the useEffect to take me to /login after I close this*/
    
})

    useEffect

    You have a couple of ways to simulate this scenario. Even without a useEffect.

    since you are using React-Router:

    you could return a navigate component instead of listening to a change.

    if (userAdded && !isOpen) {
  return <Navigate path="/login" />
}

    Toggle

    The problem you see here is that a toggle hook is a quick and dirty way to "toggle" stuff, however, this also means you can only do that and the rise grows to create another approach

    When you close your modal, you could use the onClose action to simulate what you want.

    <Modal isOpen={isOpen} onClose{toggle} {...modalContent} />

    You could update the onClose to simply navigate

    const closeModal = () => {
  if (userAdded) {
    navigate("/login")
  } else {
    toggleModal()
  }
}

<Modal isOpen={isOpen} onClose={closeModal} {...modalContent} />

    Either way, I would drop the useEffect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search