我在我的 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": "xxxxxx@gmail.com",
      "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: "example@gmail.com"}
    success: true
    __proto__: Object

【问题讨论】：

我认为这是因为.then(response => console.log(response)) 在链接then 时，前一个then 返回的内容是下一个then 可用的内容，因为console.log 不返回任何内容下一个then 将接收undefined 的data 参数，您将设置user 状态为undefined。
您的数据是包含来自用户的详细信息的对象，而不是用户数组。另外，由于这是一个登录用户请求，我建议您不要使用初始 [] 状态，而是使用 null 状态，并且不要在 user 上使用映射，因为您没有获取用户。

标签： javascript reactjs api state

【解决方案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