Я живу в городе, поэтому в приятный солнечный день всегда приятно видеть, как много людей выгуливают своих собак разных форм и размеров. Тем не менее, не менее неприятно видеть собачьи экскременты разных форм и размеров, разбросанные по тротуару, которые не собираются владельцами собак. Это огромная проблема или это всего лишь незначительное раздражение, усиленное моим отвращением? Поэтому я решил, что приложение с возможностью отображать местоположение неотобранной кучи фекалий на Google Maps даст мне визуальное представление о том, насколько серьезна проблема.

В наши дни каждый носит с собой смартфон, и почти каждый смартфон может захватывать изображение вместе с его местоположением GPS в своих метаданных. Все, что мне нужно, это приложение, которое позволяет пользователю загружать изображение, а затем извлекать данные GPS, встроенные в файл изображения, для отображения местоположения на Google Maps.

Как видно на приведенном выше снимке экрана, местоположения GPS с изображений успешно отображаются на карте. Это достигается с помощью «exif-js» для React. Эта функция позволяет мне извлекать все виды метаданных из файла изображения. Пока файл изображения содержит информацию GPS, я могу извлечь широту и долготу и создать объект GPS для карт Google Maps для отображения в маркере. Однако я столкнулся с небольшой проблемой.

Когда пользователь нажимает кнопку «Новый отчет» в строке меню, появляется указанная выше форма, позволяющая пользователю загрузить изображение. На всякий случай я разрешаю им выбирать относительный размер неубранных фекалий, чтобы на карте отображалась большая куча с более заметным значком. Когда пользователь нажимает кнопку «Отправить», данные извлекаются, а местоположение и размер GPS загружаются в серверную часть. Однако здесь и возникает проблема.

Приведенный выше код кажется достаточно простым. Проблема, с которой я столкнулся, - это функция обратного вызова в методе EXIF.getData. Это выполняется асинхронно, что означает, что функция обратного вызова выполняется всякий раз, когда возвращаются данные файла. Чтобы убедиться, что данные GPS загружаются при захвате, мне нужно выполнить все бэкэнд-операции (получить связанный код) в обратном вызове. В обычном приложении React / Redux во втором «.then» после «fetch» ​​мы обычно вызываем функцию для обновления хранилища Redux («this.props.someFunction (data)» с последующим перенаправлением на страницу, которую я хочу для отображения после обновления хранилища Redux новыми добавленными данными (обратите внимание, я закомментировал «this.props.history.push ('/ reports')). Я не могу сделать ничего из этого в этом обратном вызове. Проблема в «This». Внутри функции обратного вызова «this» имеет контекст обрабатываемого файла изображения (см. Строки 77, 78, 79). Любая ссылка с использованием «this» приводит к ошибке «не удается прочитать свойство«… »из undefined ». Я не могу выполнить« this.props.someFunction (data) », а также не могу выполнить« this.setState », потому что контекст« this »в обратном вызове по-прежнему является файлом изображения.

Следовательно, я не могу использовать данные JSON, которые я получил обратно от бэкэнда, для обновления хранилища Redux, даже если только что загруженный отчет о фекалиях был добавлен в базу данных посредством «выборки». Теперь мой магазин Redux устарел, когда я обновляюсь. Кроме того, как только я выйду из функции обратного вызова, у меня больше не будет доступа к данным JSON. А поскольку я не могу использовать history.push из-за проблем с контекстом, я даже не могу перенаправить на другой компонент. Фактически, форма отчета остается «открытой» после того, как пользователь нажал кнопку «Отправить».

Вот как я пока обхожу эту «проблему». Добавил кнопку выхода!

Это позволяет мне обойти проблему контекста и, по крайней мере, закрыть форму отчета и перенаправить на желаемый компонент - карту отчета о корме.

К тому времени, как я приехал сюда, я уже потерял данные JSON, полученные от бэкэнда. В результате я больше не могу добавлять новые данные отчета в хранилище Redux. У меня нет другого выбора, кроме как снова получить весь набор из серверной части и обновить все хранилище Redux. Должен признать, не самый эффективный. Это, однако, гарантирует, что у меня есть все обновленные данные для отображения при перенаправлении на компонент «Отчет».

Я читал об использовании привязки в этом типе проблемы контекста, но моих знаний в JavaScript недостаточно, чтобы помочь мне найти правильное решение. Если вы читаете это и столкнулись с аналогичной проблемой при использовании EXIF, не стесняйтесь комментировать. Любое предложение приветствуется.