반응 중첩 된 상태 수정

Question

테이블이 있으며 각 행에는 식사가 하나 있습니다. 각 식사는 많은 재료로 구성되어 있습니다. 성분을 삭제하고 식사를 삭제할 수 있기를 원합니다. 상태와 삭제 요소 기능은 어떻게 생겼습니까?

이 상태는 다음과 같아야합니다

{ 
    meals: [{name:'breakfast', id:11}, ...] 
    ingredients: [{name: 'eggs', id:111, meal_id:11}...] 
} 

나이 :

{ 
    meals: [{ 
     name:'breakfast', 
     ingredients: [{name: 'eggs'}] 
    }] 
} 

내가 두 번째 옵션이 더 낫다고 생각합니다. 그리고 가장 중요한 질문 : 삭제 성분 기능은 어떻게 생겼습니까? 각 성분마다 고유 한 ID가 있어야하며 성분 ID를 전달하는 삭제 작업을 보내야합니까?

Answer 1

식사는 부모 구성 품목이어야합니다. 각 식사 하위 구성 요소의 경우 식사 ID, 이름, 재료가 소품으로 전달되어야합니다. 식사에는 성분 세부 사항이 전달 된 성분 하위 구성 요소 목록이 있어야합니다. 각 하위 구성 요소에는 고유 키가 있어야하므로 해당 ID는 식사 및 구성 요소 구성 요소 모두에 전달되어야합니다.

삭제 성분에 대한 이벤트 핸들러는 해당 성분이 삭제되고 소품에 반영되는 식사 구성 요소에서 처리되어야합니다. 마찬가지로, 식사는 부모 급식 구성 요소에 의해 삭제되어야하며 새 주를 소품으로 전달해야합니다.