Meteor React设计——嵌套组件：函数调用

Question

我目前正面临 Meteor 和 React 的问题，我知道一些部分解决方案，但它们不起作用，而且我 none 其中指向正确的方向。

情况：

一切都是关于一个健身应用程序：我有一个代表客户锻炼的结构，而每个锻炼都可以有定义数量的组（一组是锻炼应该多久做一次）。每个集合都有一些属性（所有用户都可以在font-end范围内操作）。

现在我有以下组件结构，其中包含一些 map-functions（状态属性在 {} 中）：

Training {customers,exercises,datetime,otherinfos}
    - Overview {customers,exercises}
         exercises.map():
         - Exercise {exercise,customers}
              customers.map():
              - Customer {exercise,customer}
                    exercise.sets.map()
                    Set {exercise, customer, set, valuesofset}

从 UI-perspective（反应）这一切都没有问题。

现在的想法是在培训组件中添加一个按钮 "Save"。按下按钮时，我想将所有 Set-Components 的状态保存在 "sets" collection 中（如果它具有除默认占位符以外的其他值）并同时保存Training-Component 在 "trainings" collection 中。但是训练还应该包括关于哪些集合被集成的信息（所以至少 Set._id 应该在保存时处于 Training-Component 状态。

现在我的想法是：

从训练一直到所有集合创建 refs，然后在按下 "Save" 时迭代所有 refs 并从所有集合调用 "Mongo.insert"。在这里，我遇到了无法 return 插入的 _id 的问题。当然，我可以在每个组件中调用不同的函数，从 Set 一直调用到 Training，但我认为这是一个溢出。
尝试通过调用嵌套函数来管理训练状态内所有集合的状态。因为我在输入上有 onChangeHandler，所以这总是会在训练中调用一个方法并检查哪个集合被更改然后更改它。我试过这种方式，但是导致性能很差
创建一个 temp-ID 用于训练，将其转发到集合（使用 componentWillReceiveProps 方法），当在集合中时，使用 temp-ID 将集合插入数据库.然后接收所有带有 temp-ID 的集合，并使用它在数据库中添加训练。 --> imo 非常复杂，如果没有必要，我真的不想调用数据库。

所以目前我不知道如何解决这个问题。我尝试将 "sets" 和 "trainings" 分开的原因是通过事实给出的，稍后我想在数据库中的新空集旁边提供有关最后一个集的信息。欢迎任何提示！

编辑：

按照建议，也有可能用Session解决问题。因此，我在 Set 中添加了以下代码：

componentDidMount() {
    Tracker.autorun(() => {
        Session.set(`set_${this.state.id}`, {
            ...this.state
        });
    });
}

然后我的想法是从以 "set_" 开始的训练遍历所有 Session-Keys - 不幸的是没有包含所有键的函数。

第二个想法是使用数组作为 Session-pair 的值。但是，处理反应式 Set 组件的更新（从 [=84= 复制数组，检查元素是否可用，创建新元素或更新现有元素）是一个相当复杂的过程。

编辑 2：

我想我找到了解决方案 Session:

Object.getOwnPropertyNames(Session.keys)

成功获得所有 Session 钥匙！感谢您的帮助！

Answer 1

如果您不想在子组件中使用 Redux 或传递父绑定回调，您可以尝试使用 Session 将数据存储在应用程序级别，可以在任何组件中访问(set/get)

https://docs.meteor.com/api/session.html

在您的情况下，您可以在 Session 中设置 "Set" 的值并在 Training 中访问它。您可能还需要 https://guide.meteor.com/react.html#using-withTracker。使用 withTracker 将有助于在任何 Session 变量发生变化时对数据库进行反应性更新。

Meteor React设计——嵌套组件：函数调用

Meteor react design - nested component: function call

javascript

mongodb

meteor

reactjs