Saya baru di React. Saya memiliki API node.js. Saya mencoba membuat halaman login. Saya membuat permintaan ke API dan saya bisa mendapatkan tanggapan. Saya memasukkan jawaban yang dikembalikan ke status bernama "pengguna". Saya ingin mencetak ini ke tag dengan fungsi peta dan memeriksa data. Namun, saya mendapatkan kesalahan "TypeError: Cannot read property 'map' of undefined." Saya telah mendefinisikan status dengan [] dan saya tidak tahu harus berbuat apa lagi.

masukkan deskripsi gambar di sini

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

{

Saya menambahkan jawaban yang dikembalikan dari API di sini.

  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
0
Abdullah Taha AKSAKAL 4 Januari 2021, 23:17

3 jawaban

Jawaban Terbaik

Anda tidak memastikan Anda mengulangi array. Semua terjadi karena merantai maka di janjikan. apa yang then kembalikan diubah menjadi input untuk then berikutnya. Jadi yang console.log tidak mengembalikan apa pun maka yang berikut ini mendapatkan undefined. Setelah Anda memecahkan masalah itu dengan menghapus log atau mengembalikan lagi responsnya, Anda perlu memastikan untuk menyimpan bagian dari yang Anda butuhkan dari respons ke status.

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

Catatan: pastikan Anda menyimpan access_token untuk membuatnya reaktif ke dalam template Anda.

0
R3ctor 5 Januari 2021, 11:36

Harus berfungsi getLogIn dan hapus baris ini .then(response => console.log(response))

1
Phillip Rekhotho 4 Januari 2021, 20:32

Hapus kode yang disediakan di file Anda

  .then(response => console.log(response))
0
Vince 4 Januari 2021, 20:36