我在我的 React 项目中收到此错误“TypeError: Cannot read property 'map' of undefined”

Posted 2023-02-22

【中文标题】我在我的 React 项目中收到此错误“TypeError: Cannot read property \'map\' of undefined”

【英文标题】：I'm getting this error "TypeError: Cannot read property 'map' of undefined" on my React project我在我的 React 项目中收到此错误“TypeError: Cannot read property 'map' of undefined”

【发布时间】：2021-04-10 15:12:48

【问题描述】：

我是 React 新手。我有一个 node.js API。我正在尝试创建一个登录页面。我向 API 发出请求，我可以得到响应。我将返回的答案放入名为“用户”的状态中。我想用地图功能将它打印到标签上并检查数据。但是，我收到错误“TypeError：无法读取未定义的属性 'map'。”我已经用 [] 定义了状态，我不知道还能做什么。

enter image description here

import React,  Component  from 'react'

export default class App extends Component 

  state =  user: [] 

  componentDidMount()
    this.getLogin();
  
   
  getLogin = () =>
    let data =  
      "email": "[e-mail]",
      "password": "123456"
    

    fetch("http://localhost:5000/api/auth/login",
      method:'POST',
      headers: 
        'Content-Type': 'application/json'
      ,
      body: JSON.stringify(data)
    )
    .then(response => response.json())
    .then(response => console.log(response))
    .then(data => this.setState( user : data ));    
  
   
  render() 
      return (
          <div>
              this.state.user.map(data => (
                <h3> data.data.access_token </h3>
              ))
          </div>
      )
  

我在这里添加从 API 返回的答案。

  success: true, access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVmY…I5M30.9r9iRA0lyXTy-MjUr2QN9RrxGneqyUoVZM8eFeXoK1s", data: …
    access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVmYzNmYmFiNjFhOWQzMGQwNDNjY2I0OSIsIm5hbWUiOiJOZW1yYW4gQWtzYWthbCIsImlhdCI6MTYwOTc5MDI5M30.9r9iRA0lyXTy-MjUr2QN9RrxGneqyUoVZM8eFeXoK1s"
    data: name: "Red Reddington", email: "[e-mail]"
    success: true
    __proto__: Object

【问题讨论】：

我认为这是因为.then(response => console.log(response)) 在链接then 时，前一个then 返回的内容是下一个then 可用的内容，因为console.log 不返回任何内容下一个then 将接收undefined 的data 参数，您将设置user 状态为undefined。

您的数据是包含来自用户的详细信息的对象，而不是用户数组。另外，由于这是一个登录用户请求，我建议您不要使用初始 [] 状态，而是使用 null 状态，并且不要在 user 上使用映射，因为您没有获取用户。

【参考方案1】：

必须使用 getLogIn 函数并删除此行 .then(response => console.log(response))

【讨论】：

或者.then(resp => console.log(resp); return resp;

我删除了.then(response => console.log(response)) 这一行，但现在我得到了不同的错误，如下所示：TypeError: this.state.user.map is not a function

您似乎在一个不是数组的对象上调用 map，请确保 this.state.user 是一个数组。

我查过了。用户状态是由“[]”定义的数组。还有什么原因造成的？

【参考方案2】：

你不确定你是在迭代一个数组。一切都在发生，因为将 then 链接在 promise 中。 then 返回的内容将转换为下一个 then 的输入。所以console.log 没有返回任何东西，因此接下来是得到undefined。通过删除日志或再次返回响应解决了该问题后，您需要确保将响应中所需的部分保存到状态中。

state =  user: [], access_token: '' 

fetch("http://localhost:5000/api/auth/login",
      method:'POST',
      headers: 
        'Content-Type': 'application/json'
      ,
      body: JSON.stringify(data)
)
.then((response) => response.json())
.then((response) =>  console.log(response); return response; )
.then((response) => this.setState( 
    user : response.data,
    access_token: response.access_token 
)); 

注意：确保您存储 access_token 以使其反应到您的模板中。

【参考方案3】：

删除文件中提供的代码

  .then(response => console.log(response))

【讨论】：

谢谢 :) 我认为它必须有效，但我仍然收到类似这样的不同错误：TypeError: this.state.user.map is not a function跨度>

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review