Метеоритная реакция - вложенный компонент: вызов функции - PullRequest
0 голосов
/ 03 мая 2018

В настоящее время я сталкиваюсь с проблемой с Meteor и React, где я знаю некоторые частично решения, но они не работают, и, тем не менее, ни один из них не указывает в истинном направлении.

Ситуация:

Все о фитнес-приложении: у меня есть структура, которая представляет упражнения для клиентов, в то время как каждое упражнение может иметь определенное количество подходов (набор - это частота выполнения упражнения). Каждый набор имеет некоторые свойства (все, что пользователь может манипулировать в конце шрифта).

Теперь у меня есть следующая структура компонентов с некоторыми функциями карты (свойства состояния находятся в {}):

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}

С точки зрения пользовательского интерфейса (реагировать) все это работает без проблем.

Теперь идея состоит в том, чтобы в компоненте «Обучение» была кнопка «Сохранить». Когда кнопка нажата, я хочу сохранить состояние всех Set-Components в коллекции «sets» (если она имеет другие значения, отличные от заполнителей по умолчанию) и в то же время сохранить Training-Component в «trainings» коллекция. Но обучение должно также включать информацию о том, какие наборы интегрированы (поэтому, по крайней мере, Set._id должен быть в состоянии Обучающий компонент во время сохранения.

Вот теперь мои идеи пока:

  1. Создание ссылок из Обучения вплоть до всех Наборов, а затем, при нажатии «Сохранить», выполнить итерацию по всем ссылкам и вызвать «Mongo.insert» из всех Наборов. Здесь у меня проблема, что я не могу вернуть вставленный _id. Конечно, я мог бы вызывать разные функции в каждом Компоненте от Set обратно до Training, но, на мой взгляд, это переполнение.

  2. Попробуйте управлять состоянием всех наборов в состоянии «Обучение», вызывая вложенную функцию. Поскольку у меня есть onChangeHandler на входах, это всегда вызывает метод в обучении и проверяет, какой из наборов был изменен, а затем изменяет его. Я пробовал это таким образом, но это привело к очень плохой производительности.

  3. Создайте временный ID для Обучения, перешлите его в Наборы (используя метод componentWillReceiveProps) и, когда он находится в наборе, вставьте Набор в базу данных с временным идентификатором. Затем получите все наборы с временным идентификатором и используйте его для добавления обучения в базу данных. -> Мне очень сложно, и я не хочу делать вызов базы данных, если это не нужно.

Так что в настоящее время я не знаю, как решить эту проблему. Причина, по которой я пытаюсь разделить «наборы» и «тренинги», объясняется тем фактом, что позже я хотел бы предоставить информацию о последнем наборе рядом с новым пустым набором всякий раз, когда он находится в базе данных. Любые советы приветствуются!


EDIT:

Как и предполагалось, есть также возможность решить проблему с Session. Поэтому я добавил следующий код в Set:

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

Моя идея заключалась в том, чтобы перебрать все Session-Keys из Training, которые начинаются с "set_" - к сожалению, нет функции, которая бы содержала все Keys.

Вторая идея состояла в том, чтобы использовать массив в качестве значения для пары Session. Однако это довольно простая процедура для обработки обновления реактивного компонента Set (скопировать массив из сеанса, проверить, доступен ли элемент или нет, создать новый или обновить существующий).


EDIT2:

Мне кажется, я получил решение с помощью Session:

Object.getOwnPropertyNames(Session.keys)

добился цели, чтобы получить все SessionKeys! Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 05 мая 2018

Если вы не хотите использовать Redux или передавать родительские обратные вызовы в дочернем компоненте, вы можете попробовать Session для хранения данных на уровне приложения, к которым можно получить доступ (установить / получить) в любом компоненте

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

В вашем случае вы можете установить значения "Set" в сеансе и получить доступ к нему в режиме обучения. Вам также может понадобиться https://guide.meteor.com/react.html#using-withTracker. Использование withTracker поможет в реактивном обновлении базы данных при изменении любой переменной Session.

...