리액트 네이티브 네비게이터 헤더 버튼 변수가 undefined 일 때

id 값을 useSelector로 잘 받아오고 있었는데

 

헤더 버튼을 클릭하자

id 값이 undefined가 찍혔다

 

어떻게 된 일 일까?

const id = useSelector(state => state.auth.id)

function submit(){
	console.log(id) //undefined!!
}

useLayoutEffect(() => {
   navigation.setOptions({
      headerRight: () => (
        <Button onPress={submit} title="submit"/>
      )
   })
}, [navigation])

 

헤더버튼은 랜더링 될 때 최초 한 번 찍히므로

예전 id의 값을 가지고 있는 듯 하다.

 

그러므로 배열에 navigation 말고 id를 넣어준다.

 

const id = useSelector(state => state.auth.id)

function submit(){
	console.log(id)
}

useLayoutEffect(() => {
   navigation.setOptions({
      headerRight: () => (
        <Button onPress={submit} title="submit"/>
      )
   })
}, [id])  // <- id 가 갱신 될 때마다 헤더 버튼을 재 랜더링한다.