Кажется, я не могу отладить это ... не уверен, что не так.
Это интерфейс 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](https://i.stack.imgur.com/BpKJx.png)
Я действительно не знаю, как начать отладку с помощью этих ошибок консоли - может кто-нибудь пролить свет на это?
Мои извинения за то, что я немногоневежественна эта производственная сборка - любая помощь очень ценится.
Спасибо!