Реакция - получить ".map не функция" в сборке PRODUCTION, но не в обычной сборке dev? - PullRequest
0 голосов
/ 09 ноября 2019

Кажется, я не могу отладить это ... не уверен, что не так.

Это интерфейс React, взаимодействующий с использованием AXIOS с бэкэндом Java / MySQL. Axios делает CRUD-запросы через localhost для получения / обновления данных.

Когда я запускаю NPM START (порт разработки 3000) для моего приложения React, оно работает нормально. Однако, когда я запускаю NPM RUN BUILD и затем обслуживаю производственную сборку (порт 5000), я получаю следующие сообщения об ошибках в консоли:

Uncaught (in promise) TypeError: this.state.reportData.map is not a function
    at t.value (TotalsPerCustomer.js:378)
    at Oi (react-dom.production.min.js:3785)
    at Ni (react-dom.production.min.js:3776)
    at Ri (react-dom.production.min.js:3960)
    at Va (react-dom.production.min.js:5514)
    at Qa (react-dom.production.min.js:5536)
    at Ou (react-dom.production.min.js:5958)
    at Pu (react-dom.production.min.js:5925)
    at ku (react-dom.production.min.js:5860)
    at Ja (react-dom.production.min.js:5787)

Я столкнулся с этим «.map не является функцией»ранее, когда я не использовал ARRAY должным образом - но я знаю, что это не вызывает проблемы сейчас, так как он отлично работает при разработке (порт 3000).

Я пытался провести некоторое исследование, почему этопроисходит, но не нашел четких ответов.

Я добавил "localhost: 5000" к разрешенному происхождению для CORS в Java-интерфейсе:

package com.example.groupproject;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class GroupProjectApplication {

    public static void main(String[] args) {
        SpringApplication.run(GroupProjectApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:3000","http://localhost:3001","http://localhost:5000");
            }
        };
    }
}

Я думаю, что мне нужно лучше понять, что происходит при создании производственной сборки- Я знаю, что это создает минимизированную версию кода - означает ли это, что если у меня есть функции с одинаковыми именами в разных компонентах React, это создаст проблему?

Нужно ли добавить зависимость axios где-нибудь в моей папке WebPack? Или в моем WebPack отсутствует другая зависимость или что-то еще?

См. Скриншот консоли ниже:enter image description here

Я действительно не знаю, как начать отладку с помощью этих ошибок консоли - может кто-нибудь пролить свет на это?

Мои извинения за то, что я немногоневежественна эта производственная сборка - любая помощь очень ценится.

Спасибо!

...