react에서 상태업데이트 로직 자체가 실행이 안되는 경우도 있나요?

Question

React에서 Modal이 Modal을 호출하는 다중 Modal 구현중 난제를 만나게 되어 질문을 올립니다소스의 경우 복붙보다는 github 주소를 남기는것이 좋을것 같아서 github링크로 대체하는점 양해부탁드립니다. (간단해서 clone후 바로 실행가능합니다)https://github.com/graylobo/modalTest 로직에 대해 설명을 하자면 아래와 같습니다. 편의상 음슴체로 하는점 양해부탁드립니다.1. 전역에서 사용될 기본Modal 을 정의 (BaseModal)2. BaseModal의 on/off의 경우 recoil로 관리3. useModalStack 을 사용하여 custom modal (TestModal1,2)을 열수있음4. custom modal은 다른 custom modal을 호출할수 있으며, modal 호출자는 피호출자의 상태를 공유할수 있음. 즉 SomeComponent가 TestModal1을 호출하고, TestModal1이 또다시 TestModal2를 호출했을때, TestModal2의 상태값을 TestModal1에서 받을수 있으며, TestModal1의 상태값을 SomeComponent에서 받을수 있음위 기능까지는 문제없이 동작하며,SomeComponent의 경우 TestModal1에서 자신의 로컬상태(inputData)가 있고 확인버튼 클릭시 currentModal.handleConfirm?.(inputData) 가 호출되고SomeComponent의 handleConfirm에 지정한 콜백로직이 실행되면서setReceivedData를 통해 receivedData의 상태 업데이트가 TestModal1에서 전달한 inputData로 정상적으로 업데이트가 됨.또한 SomeComponent가 TestModal1을 호출한 프로세스와 마찬가지로,TestModal1에서 TestModal2 를 호출하고TestModal2에서 자신의 로컬상태(inputData)가 있고 확인버튼을 클릭하여 currentModal.handleConfirm?.(inputData)를 호출하면 TestModal1의 handleConfirm에 지정한 콜백로직이 실행되면서TestModal2에서 전달한 inputData를 받는것 까지는 정상적으로 동작하는데여기서 문제는 TestModal1의 setReceivedData를 통해 receivedData의 상태가 TestModal2에서 전달한 inputData로 업데이트가 되어야 하는데 디버깅시 setReceivedData 자체가 아예실행이 되지않음.react개발하면서 useState의 set함수에 전달하는 콜백함수 자체가 실행이 안되는거는 처음 겪어보고 레퍼런스도 없어서혹시 저와 동일한 문제를 겪거나 해결방안을 알고 계시는 분이 있다면 조언주시면 매우 감사하겠습니다.

프로폴리스 · Answer

코드를 다보기에 제 팀원분이 아니라..그냥 경험만 적어보면..1.아직 마운트되지 않는 컴포넌트 문제일 수 있습니다. 마운트 안됬는데 상태 바꿔바도 소용 없지요.2.콜백 함수 내부가 외부의 변수나 상태에 의존하는 경우인가요? 그러면 해당 의존성이 변하지 않으면 상태 업데이트 안 할수 있습니다. memo같은 거 사용할 때 가끔 그럽니다.3.콜백 함수가 호출 되었나요?

codezzzz · Answer

openModal({ title: &#34;TestModal2&#34;, element: <TestModal2 handleConfirm&#61;{(data) &#61;> { closeModal(); setReceivedData(() &#61;> { // When calling Modal from Modal, the update logic itself is not execute. console.log(&#34;data received from TestModal2:&#34;, data); return data; }); }}/>, }); 모달 생성할때 props으로 해당 함수 넘겨주는식으로 구성하시면 동작할꺼같습니다!

react에서 상태업데이트 로직 자체가 실행이 안되는 경우도 있나요?

2개의 답변

기술 목록