反应嵌套状态修改

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应该传递给膳食和成分组成部分。

删除成分的事件处理程序应在膳食组件中处理，其中相应的成分被删除并反映在道具中。同样，膳食应该由父膳食组件删除，新状态应该作为道具传递下去。