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

Question

I'm new on React. I have a node.js API. I'm trying to create a login page. I make a request to the API and I can get a response. I put the returned answer into the state named "user". I want to print this to an tag with the map function and check the data. However, I am getting the error "TypeError: Cannot read property 'map' of undefined." I have defined the state with [] and I don't know what else to do.

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>
      )
  }
}

{

I add the answer returned from the API here.

  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

Answer 1

Got to function getLogIn and remove this line.then(response => console.log(response))

Answer 2

delete the code provided in your file

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

Answer 3

You are not making sure you are iterating over an array. All is happening because chaining then in the promise. what a then returns is converted into the input for the next then . So the console.log one is not returning anything hence the following next is getting undefined . Once you solved that issue by removing the log or returning again the response, you need to make sure to save the parts from you need from response into the state.

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 
})); 

Note: make sure you store access_token to make it reactive into your template.