Simple counter in React Native

const MakeCount = () => {
 let [a, setA] = useState(0);
 setA(a++);
}

const Stack = ({ navigation}) => {
  return (
     false,
    }}>
       (
           navigation.openDrawer()}/>
        ),
        headerRight: () => (
          

 /**The problem*/
          
        )
      }}/>
      

  );
};

So when I run this I get an error that says "Too many re-renders". I just want to create an incrementable text on my header where I cilck a button on another screen to increment it. Is there any way to fix this or any suggestions?

No button needed to increment for now, I just want the text to appear.

Good Question 0Comment Collection Report

0 Answer

zzbbenben 注册会员
2023-01-25 12:51

The issue is with setA(a++). The state should never be set in such a way that it can cause a re-render causing it to set state again (which is happening above). Simply put, setA increments the value of a, which causes setA to run again which again increments the value of a, and so on and so forth.

So, if you just want the state to be set only once, you can place it in a useEffect

useEffect(() => setA(a++), []);

But most of the time, you'd need to use buttons or stuff like that to update the state.

Agree 0 0Comment

About the Author

: dxylight 注册会员
这家伙很懒，什么都没留下...

0: Answer

0: Article

0: Question

Question Info

Publish Time: 2023-01-25 12:51

Update Time: 2023-01-25 12:51