为啥我收到“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 应用程序的生产版本的主要内容,如果未能解决你的问题,请参考以下文章

为啥我收到 NullPointerException 错误

为啥我收到 AuthenticationCredentialsNotFoundException?

为啥我收到的 jwt 格式错误?

为啥我收到“无法解析 NSPredicate”错误

为啥我收到 AbstractDynamicObject$CustomMessageMissingMethodException 错误?

无效的字典 0 )。为啥我收到此错误?