인프런 커뮤니티 질문&답변
작성한 질문수
state의 무결성?
해결된 질문
작성
·
289
0
안녕하세요. 올려주신 리엑트쿼리 기반으로 연습하고 있습니다.
antd의 datepicker 이용해서 기간별로 포스트 불러오는걸 해보고 있습니다.
리액트의 state에 관해서 좀 기초적인?원초적인? 질문이 있습니다..
출발날짜의 상태와 변경함수
const [ startDate, setStartDate ] = useState(moment().subtract(5, 'days'));
...
const onChangeStartDate = (date, dateString) => {
setStartDate(date);
};
날짜 변경후 적용버튼 눌러 서버 데이터 갱신하는 부분
const onLoadTodos = () => {
if(!startDate || !endDate){
message.error('날짜를 선택해 주세요.', 0.5);
return;
}
queryClient.invalidateQueries('orders');
}
데이터 가져오는 useQuery 부분
const { status, isLoading, data: orders } = useQuery('orders',
() => {
console.log('useQuery');
console.log(startDate);
const from = startDate.toDate();
const til = endDate.toDate();
const params = {from:from, til:til, stat1: orderStatOpt};
console.log(params);
return loadTodosAPI(params)}
...
날짜를 변경setStartDate(date);한다음에
<Button onClick={()=>{console.log('메롱', startDate)}}>날짜보기</Button>
이렇게 버튼으로 startDate값을 가져오는것과
invalidateQueries('orders'); 로 useQuery('orders',를 불러서 안에서 startDate를 가져오면 값이 다르게 나오는데..
원래 state의 값이 다르게 나오기도 하나요? 아니면 useQuery안에서 state가 다르게 작동한건지..
이상태에서 브라우저밖으로 커서 이동했다가 다시 들어오면(갱신시) state값이 동기화되긴 합니다..
답변 1
1
네 버튼쪽이 맞는날짜이고
invalidateQueries('orders');
로 하면 날짜 뿐만아니라 다른 state들도 갱신전 예전값으로 출력됩니다.
그상태에서 날짜출력버튼 눌러보면 갱신된값이 나오는데
state가 갱신된값, 갱신되기 전값 두개가 공존해버립니다..
로 강제 리패칭하거나 브라우저 커서 나갔다 들어오면 제대로 갱신된 state값을 출력하고요.