为啥我收到“TypeError：this.state.users.map is not a function”，用于部署的 React 应用程序的生产版本
Posted
技术标签:
【中文标题】为啥我收到“TypeError：this.state.users.map is not a function”，用于部署的 React 应用程序的生产版本【英文标题】：Why am I getting a “TypeError: this.state.users.map is not a function” for deployed production version of React application为什么我收到“TypeError：this.state.users.map is not a function”，用于部署的 React 应用程序的生产版本 【发布时间】：2021-07-22 04:28:03 【问题描述】：使用 React 构建 Web 应用程序以从 Firestore 数据库中提取用户信息。在本地运行应用程序时，它运行完美，我可以加载用户信息。部署后，我现在收到“TypeError：this.state.users.map 不是函数”消息，页面甚至无法加载。为什么它会在部署之前正常工作？解决方法是什么？
import React, Component from 'react';
import AllCoaches from '../components/search/AllCoaches';
import Banner from '../components/layout/banner';
import axios from 'axios';
// MUI Stuff
import Grid from '@material-ui/core/Grid';
import CircularProgress from '@material-ui/core/CircularProgress';
class coaches extends Component
state =
users: []
componentDidMount()
axios.get('/coaches')
.then(res =>
console.log(res.data)
this.setState(
users: res.data
)
)
.catch(err => console.log(err));
render()
let coaches = this.state.users ? (
this.state.users.map((user) => <AllCoaches user=user/>)
) : ( <CircularProgress/> );
return (
<Grid container>
<Banner/>
coaches
</Grid>
);
export default coaches
通过localhost运行时console.log(res.data)的输出为：
Array(5) 0: userId: "name0", bio: info0, 1: userId: "name1", bio: info1, 2: userId: "name2", bio: info2, 3: userId: "name3", bio: info3, 4: userId: "name4", bio: info4, 5: userId: "name5", bio: info5,length: 5 proto: Array(0)
console.log(res.data) 部署时的输出吐出看起来像我的 index.js 文件的内容？
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/>.....</body></html>
【问题讨论】：
所以你的后端没有返回你认为应该返回的东西。所以你的路线行不通。 【参考方案1】：1.大写你的组件名称
2. 要使用状态，您必须调用 super() 方法：
constructor(props)
super(props);
this.state =
users: [],
;
【讨论】：
我应用了上述修复程序，但仍然收到相同的错误：“TypeError: this.state.users.map is not a function” console.log(this.state.users) 在渲染和共享结果中 console.log(this.state.user) 的结果是已部署版本的 Array(0)。本地主机的结果是 (5) […, …, …, …, …] 您在您的状态中定义用户，但您使用 console.log(this.state.user) 并获取空数组，在您的状态对象中查看您的用户名【参考方案2】：这里有很多问题，我会指出两个最明显的：
类名“coaches”的首字母需要大写才能成为有效的 React 组件并呈现给 DOM。
状态应该首先定义如下，
constructor(props)
super(props);
this.state =
users: [],
;
应用这些修复后，您的代码应该可以按预期工作。如果您现在或将来遇到任何问题，请随时发表评论，我会为您提供帮助！
【讨论】：
我应用了上述修复程序，但仍然收到相同的错误：“TypeError: this.state.users.map is not a function”以上是关于为啥我收到“TypeError：this.state.users.map is not a function”，用于部署的 React 应用程序的生产版本的主要内容，如果未能解决你的问题，请参考以下文章
为啥我收到 AuthenticationCredentialsNotFoundException？
为啥我收到 AbstractDynamicObject$CustomMessageMissingMethodException 错误？