React - 在 PRODUCTION 构建中获取“.map 不是函数”，但在常规开发构建中却没有？

Question

我似乎无法对此进行调试...不确定出了什么问题。

这是一个使用 AXIOS 与 Java/MySQL 后端通信的 React 前端。 Axios 正在通过本地主机对 fetch/update 数据发出 CRUD 请求。

当我为我的 React 应用程序运行 NPM START（开发 - 端口 3000）时，它运行没问题。但是，当我运行 NPM 运行 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)

我以前在没有正确使用 ARRAY 时遇到过“.map 不是函数”的问题 - 但我知道这不会导致现在的问题，因为它在开发（端口 3000）上运行良好。

我已尝试对发生这种情况的原因进行一些研究，但尚未找到任何明确的答案。

我已将 "localhost:5000" 添加到 Java 后端允许的 CORS 来源：

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 组件中有相同名称的函数那么它会产生一个问题吗？

我需要在我的 WebPack 文件夹中的某处添加 axios 依赖项吗？还是我的 WebPack 中存在不同的依赖项或缺少某些内容？

请参阅下面的控制台屏幕截图：

我真的不知道如何开始使用这些控制台错误进行调试 - 有人可以解释一下吗？

我很抱歉对这个生产版本有点无能为力 - 非常感谢任何帮助。

谢谢！

Answer 1

这也发生在我身上。首先我试图解决它是 Array 的问题然后最终意识到实际上它不是 - 因为前端（端口 5000，生产构建）在构建生产时失去与后端（端口 8080）的连接，因此数组是空的.

我是这样解决的：在我的 React 项目的根目录中创建了 .env 文件：

REACT_APP_API_URL_PROD=http://xxx.xxx.xxx.xxx:8080
REACT_APP_API_URL_TEST=http://xxx.xxx.xxx.xxx:8080
REACT_APP_API_URL_DEV=http://localhost:8080

然后在 requests.js 文件（代码片段）

import axios from 'axios';
import endpoints from './endpoints';

if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = process.env.REACT_APP_API_URL_PROD;
} else if (process.env.NODE_ENV === 'test') {
    axios.defaults.baseURL = process.env.REACT_APP_API_URL_TEST;
} else {
    axios.defaults.baseURL = process.env.REACT_APP_API_URL_DEV;
}

export const getRequest = async url => axios.get(url);

export const get = (type, params, options = null) => dispatch => {
    const fn = endpoints[type];
    axios.defaults.headers.common = {'Authorization': `Bearer ${localStorage.getItem('token')}`};
    axios.get(fn(params), options)
        .then(response => {
            dispatch({
                type: type,
                payload: response.data
            });
        });
};

现在，为什么这对你来说是迟到的答案，将来可能有人会花几个小时来解决这个问题。在此之后，静态页面可以通过 'serve -s build' 和 Apache HTTP 服务器正常提供，我想它可以通过任何其他服务器提供。

请阅读 this 了解更多信息。

Answer 2

标记为与此问题重复：

一般来说，当出现“.map 不是函数”时，这意味着您没有提供要映射的数组。只能映射数组类型。因此，如果需要，将初始状态设置为空数组（然后获取数据、设置状态等）。请记住，如果您将某些键映射到您的页面，您可能需要使用 'blank' 对象设置初始空数组，这些键具有空值或空值。

感谢最初帮助回答此问题的人。

React - 在 PRODUCTION 构建中获取“.map 不是函数”，但在常规开发构建中却没有？

React -- getting ".map is not a function" on PRODUCTION build, but not on regular dev build?

reactjs

production-environment