Reactjs 反应嵌套状态修改

我有一张桌子，每排有一顿饭。 每顿饭都有许多配料。 我希望能够删除配料和删除膳食。 状态和删除成分函数应该是什么样子

如果国家是这样的：

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

或者这个：

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

我认为第二种选择更好。

---

最重要的问题是：删除配料功能应该是什么样子？每个配料都应该有自己的唯一id，我应该发送一个通过配料id的删除操作吗？

膳食应该是父组件。对于每个餐子组件，餐id、名称和配料应作为道具传递。这顿饭应该有一份配料明细表，上面有配料明细。id应该同时传递给膳食和配料组件，因为每个子组件都应该有一个唯一的键

删除配料的事件处理程序应该在膳食组件中处理，其中相应的配料被删除并反映在道具中。类似地，父膳食组件应该删除膳食，新状态应该作为道具传递