为啥我收到“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 错误?