0

I have a screen that navigates to another screen. Both uses same stateful component that should set a state for whichever screen it was called. But in my case, I am navigating to the second screen and then uses the stateful component there.

The problem is, when I set a state for the second screen using useEffect, the first screen is being affected too.

firstScreen = () => {
  const [pictures, setPictures] = useState([])
  
  return(
    <>
     <Component 
        pictures = {pictures}
        setPictures = {setPictures}
     />
     <button onPress = {Navigation.navigate(secondScreen)}/>
    </>
  )
}


secondScreen = () => {
  const [pictures, setPictures] = useState([])
  
  return(
     <Component 
        pictures = {pictures}
        setPictures = {setPictures}
     />
  )
}

Component = ({pictures, setPictures}) => {
   useEffect(()=>{
     setPictures(some data from api) // this sets both pictures for firstScreen and secondScreen, I only want to set the pictures on the secondScreen
   },[])

   return (
     ...
   )
} 

1 Answers1

0

When you call the Component in SecondScreen - just pass another prop like: secondScreen = true

And in the Component useEffect do this check:

useEffect(()=>{
if(props.secondScreen)
     setPictures(some data from api) 
   },[])

You don't need to send it from the firstScreen too and can leave it undefined there, because undefined it treated as false, So there it won't go inside the if block.

Tehila
  • 917
  • 4
  • 19
  • If I do it this way, I'm not gonna be able to use the component in the firstScreen whenever I need to do. The component is actually for uploading media and the first screen and second screen has it. So if I only allow the second screen to setPictures in the component's useEffect, the first screen's usage of the component will never be able to setPictures. – user13080475 Oct 12 '22 at 00:01
  • The only thing that I can think of right now is not to use useEffect hook to catch the api response but the problem here is it proceeds to setPictures right after the apicall even though there's no response yet(since I am putting the setPictures right after the line of the api call). Tried having a condition if the response contains something already before it setPicture but on the first upload, it will not setPicture because the response is undefined at first. It only goes for the second upload because the response is already filled for the from the first upload . – user13080475 Oct 12 '22 at 00:08
  • About your first comment, why do you think you won't be able to use the component in the firstScreen? You **can** use it even if you don't send some prop. So even if you don't send the `sender` the other code of the `Component` will run, except the setPictures in `useEffect`. But I didn't understand your meaning: You said in your question that you **don't** want to trigger the setPictures in `useEffect` for the firstScreen and now you do, so can you explain the full thing you're trying to achieve in all this? When do you want it to setPictures and when you don't? – Tehila Oct 12 '22 at 01:18