LWC 자식은 @wired Apex 쿼리에 의해 오래된 데이터를 캐시합니다. 부모는 if : true로 숨겨져 있기 때문에 querySelector ()에 의해 자식에 대해 refreshApex ()를 사용할 수 없습니다. 무엇을해야합니까?
간단한 앱 구조 (이미지 참조) : 오른쪽에 "광고 항목"하위 구성 요소 목록 (이 그림에서 1601xCC5Bulk 하나만), 왼쪽에 팔레트가있는 컨테이너. << Allocate btn은 양식이있는 다른 하위 모달을 엽니 다 (if : true ..)이 양식의 선택 목록은 @wire apex를 사용하여 빈 팔레트 만 표시하므로 DML 이후에 양식의 컨트롤러 자체에서 새로 고쳐집니다.
예를 들어 오른쪽의 빨간색 버튼을 사용하여 부모가 팔레트의 양을 변경할 때 문제가 발생합니다. 이 DML은 팔레트와 함께 컨테이너를 삭제합니다.
그러나 숨겨진 양식이 다시 열리면 이전 팔레트 값이 여전히 선택 목록 값으로 존재하므로 해당 데이터를 새로 고쳐야합니다. 그러나이 자식은 숨겨져 있으므로 표준으로 연결할 수 없습니다. parent-> querySelector (child2) .method ()
- 새로운 질문에 대해 죄송합니다 : 숨겨진 구성 요소의 메서드에 액세스하는 방법이 있습니까?
- 또한 Apex 쿼리에 대한 호출을 상위 구성 요소 (트리거하기 쉬움)로 이동 한 다음이를 api 인수로 하위 모달에 전달하여 모달이 나타나면 업데이트 된 데이터를 가져 오려고합니다. 부모가 아이의 부담을 덜어주기 때문에 이것은 조금 잘못된 느낌입니다. (아마도 내가 틀렸을 수도 있습니다)
- 또한 해당 apex 쿼리에 대해 child 's renderedCallback을 사용하려고 생각했지만 무한 렌더링 루프가 두렵습니까?
- auraEnabled apex의 캐싱을 비활성화하는 것은 좋은 일이지만 불가능 해 보입니다.
다음은 관련된 모든 부분 만 보여주는 베어 본 마크 업입니다.
=== PARENT (2 명의 자녀 포함) ===
HTML
<template for:each={lineItems.data} for:item="lineItem">
<lightning-layout-item key={lineItem.Id} size="12">
<c-packing-list-line-item-card lineitem={lineItem} onallocatebuttonpress={openAllocationModal}></c-packing-list-line-item-card>
</lightning-layout-item>
</template>
<template if:true={isLineItemModalOpen}>
<c-packing-list-allocation-modal recordid={recordId} oncloseallocationmodal={closeAllocModal} onproductallocated={refreshData}></c-packing-list-allocation-modal>
</template>
JS
openAllocationModal(e) {
this.editItemId = e.detail;
this.isLineItemModalOpen = true;
}
closeAllocModal() {
this.isLineItemModalOpen = false;
}
=== CHILD 1 : packing-list-line-item-card === (오른쪽에있는 항목, 제품 세부 정보 표시, 모달에 ID 전달)
HTML
<lightning-button variant="brand" label="<< Allocate" data-itemid={lineitem.Id} onclick={openAllocationModal}></lightning-button>
JS
openAllocationModal(e) {
const selectEvent = new CustomEvent('allocatebuttonpress', { detail: e.target.dataset.itemid });
this.dispatchEvent(selectEvent);
}
=== CHILD 2 : 할당 모달 (조건부 표시) ===
HTML
<template if:true={showInsertButton}>
<button class="slds-button slds-button_brand" onclick={handleAllocationInsert}>Insert</button>
</template>
JS (당신은 아마도 closeModal () {}에만 관심이있을 것이고, 다른 것은 완전성을위한 것입니다)
handleAllocationInsert() {
[...]
createRecord(recordInput)
.then((allocId) => {
this.showToast('success', 'Success', 'Product Allocated');
this.handleInsert(this.palletValue);
this.refreshPallets();
})
.catch((error) => {
this.showToast('error', 'Error creating record', error.body.message);
this.closeModal();
});
}
closeModal() {
// On save parent closes modal
console.log('closing 1');
const selectEvent = new CustomEvent('closeallocationmodal');
this.dispatchEvent(selectEvent);
this.spinner = false;
}
handleInsert(palletValue) {
// On save parent refreshes container view
const selectEvent = new CustomEvent('productallocated', {
detail: this.palletcontainers[palletValue].containerId
});
this.dispatchEvent(selectEvent);
this.closeModal();
}
답변
새로운 질문에 대해 죄송합니다 : 숨겨진 구성 요소의 메서드에 액세스하는 방법이 있습니까?
제 아이는 물리적으로 DOM에서 제거하고 더 이상 존재한다 전혀 (구성 요소 캐시에 아마도 제외).
또한 Apex 쿼리에 대한 호출을 상위 구성 요소 (트리거하기 쉬움)로 이동 한 다음이를 api 인수로 하위 모달에 전달하여 모달이 나타나면 업데이트 된 데이터를 가져 오려고합니다. 부모가 아이의 부담을 덜어주기 때문에 이것은 조금 잘못된 느낌입니다. (아마도 내가 틀렸을 수도 있습니다)
이것은 실제로 이것을 수행하는 매우 표준적인 방법입니다. 아이는 데이터 표시에 대해서만 걱정할 필요가 있습니다. 일반적으로 구성 요소 계층 구조에서 가능한 한 높은 데이터를 가져 오거나 설정하는 것이 좋습니다 (그러나 필요 이상으로 높지 않음).
또한 해당 apex 쿼리에 대해 child 's renderedCallback을 사용하려고 생각했지만 무한 렌더링 루프가 두렵습니까?
나쁜 생각은 예상대로 무한 루프를 얻을 것입니다. 그러나 여기서 구성 요소의 connectedCallback을 사용하는 것이 합리적 일 수 있습니다. 이 이벤트는 구성 요소가 추가되거나 DOM에서 이동 될 때만 호출되므로 무한 루프 문제가 발생하지 않습니다.
auraEnabled apex의 캐싱을 비활성화하는 것은 좋은 일이지만 불가능 해 보입니다.
완벽하게 가능하지만 마지막 수단이라고 생각합니다. 대부분의 경우 데이터는 사용자가 작업을 수행 할 때까지 변경되지 않으므로 캐싱은 성능을 향상시킬 수 있습니다. 즉, 디자인도 자주 호출 할 필요가없는 것처럼 보이므로 캐싱을 비활성화하는 것도 허용됩니다.
결론적으로 부모의 데이터를 제어하는 것이 가장 쉬운 해결책이라고 말하고 싶습니다. 이는 또한 일반적으로 하위 구성 요소가 상위에서 제공 한 데이터로만 작동하므로 대부분의 경우 일반적으로 허용되는 솔루션입니다. 예를 들어 lightning-input는 서버와 직접적으로 아무것도하지 않고 이벤트를 통해 부모에게 변경 사항을 전달합니다. 사용하기에 완벽하게 자연스러운 디자인입니다.
아이들이 작업을 계속하기를 원한다면, connectedCallback에서 refreshApex 호출을 받거나 캐싱을 비활성화하십시오. 어느 쪽이든 문제를 해결해야하지만, 큰 데이터 세트에서 테스트하여 어떤 옵션이 최상의 성능을 제공하는지 확인할 수 있습니다.