React 映射突然显示错误，一个月运行良好答案

【问题标题】：React mapping is suddenly showing error, which was working fine for a monthReact 映射突然显示错误，一个月运行良好
【发布时间】：2021-07-03 05:06:59
【问题描述】：

我正在做一个 MERN 堆栈项目。我为此工作了一个月。我用包裹创建反应应用程序，直到昨天才工作。根据要求，我将其更改为 create-react-app。

所以有一段时间它在 create-react-app 中运行良好。但是当我构建项目后，所有 map() 函数都显示错误。

这是我的 mongoDB 集合的 JSON 文件。

{
  "_id": {
    "$oid": "60db452a8fe38d2860d03426"
  },
  "description": "Sample desc.",
  "dateRange": "July 24, 2021 - July 25, 2021",
  "status": "Post",
  "date": "2021-06-29",
  "createdAt": {
    "$date": {
      "$numberLong": "1624982826539"
    }
  },
  "updatedAt": {
    "$date": {
      "$numberLong": "1625234700197"
    }
  },
  "__v": {
    "$numberInt": "0"
  }
}

这是页面的编码

从'react'导入反应，{组件}；从'axios'导入axios；

import React, { Component } from 'react';
import axios from 'axios';

class AboutUsBody extends Component {
constructor(props) {
    super(props);
    this.state = {
        dates: []
    }
}

componentDidMount() {
    axios.get('http://localhost:6060/aboutus/view')
        .then(response => {
            const dates = response.data;
            this.setState({ dates });
            console.log("response", response);
        }).catch(error => {
            alert(error.message);
            console.log("Error", error);
        });
}

render() {
    return (
        <div>
            {this.state.dates.map((item, index) =>
                <div>
                    {item.status && item.status === 'Post' &&
                        <div>
                            <div className="text-center container" style={{ fontSize: "110%", fontStyle: "italic" }}>
                                <p className="pt-2 ps-2 pe2">{item.description}</p>
                            </div>
                            <div className="text-center container" style={{ fontSize: "200%" }}>
                                <p>{item.dateRange}</p>
                            </div>
                        </div>
                    }
                </div>
            )}
        </div>

    );
}
}export default AboutUsBody;

这是我得到的错误

因为它工作了一个月，我不明白为什么它突然显示这个错误。请帮助我确定错误是什么。

Console.log(日期)

console.log（响应）

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当你打电话时：

this.setState({ dates });

您将日期设置为对象或地图仅适用于数组。

应该是：

this.setState( dates )

或者如果响应是一个对象：

this.setState([dates])

【讨论】：

如果我更改为 ([dates]) 或 (dates) 错误消失，但数据未呈现（无法查看数据）
回复数据是不是太长了可以贴在评论里？
它太长了。我在问题中添加了它的屏幕截图
是的。这是在日期
截图是否来自console.log("response", response)？

【解决方案2】：

您正在记录response，因此请确认response.data 实际上是一个数组。如果它不是数组，这就是原因（因为您尝试在不是数组的东西上使用 map 方法）。

通过一些快速测试，只有 Firefox 使用错误文本“TypeError: (foo).map is not a function”，并且仅在对象已定义但不是数组时使用。所以，我猜你的服务器现在返回的是一个对象而不是一个数组。

【讨论】：

你能告诉我我需要做什么才能让它工作吗？我也添加了databade(JSON)。
该请求返回的是 HTML，而不是您期望的 JSON 对象。而且，HTML 看起来像一个 React 索引页面。我认为您将错误的 URL 传递给 axios.get()
哦，我想当我尝试在heroku中部署它时，可能是那个时候链接被折叠了