Recupero dati da API in React

Aug 20 2020

Blog.js

import React, { useState, useEffect } from "react"
import Axios from "axios"

const Home = () => {
  const [blog, setBlog] = useState([])
  
  useEffect(() => {
    loadBlog()
  }, [])

  const loadBlog = async () => {
    await Axios.get(`http://localhost:3001/api/blog/get`)
      .then((res) => {
        console.log(res.data.data)
        setBlog(res.data.data)
        console.log(blog)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  return (
    <>
      <div className="container">
        <div className="col-lg-10">
          <h2> React CRUD Operation </h2>
        </div>
        <div className="col-lg-2">
          <button> Add Blog </button>
        </div>
        <table className="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>Picture</th>
              <th>Title</th>
              <th>Short Description</th>
              <th>Author</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{blog.id}</td>
              <td>
                <img src={"../../../public/logo512.png"} alt="not available" />
              </td>
              <td>{blog.title}</td>
              <td>{blog.short_desc}</td>
              <td>{blog.author}</td>
              <td>
                <button>Edit</button> <button>Delete</button>{" "}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  )
}

export default Home

Sto recuperando i dati dall'API e ottenendo i dati. i dati stanno venendo bene ma non stanno andando in setBlog Hook. Quando consolo la risposta va bene ei dati vengono recuperati con successo ma il problema è che non sta andando in setBlog Hook. Sono nuovo a reagire e non so perché non sta andando in setBlog Hook. qualsiasi aiuto sarà apprezzato

Risposte

1 KennyJohnJacob Aug 20 2020 at 21:49

Ciò è dovuto alla natura asincrona dell'impostazione dello stato. Il codice che hai scritto,

.then((res) => {
        console.log(res.data.data)
        setBlog(res.data.data)
        console.log(blog)
      })

qui viene eseguito in modo sincrono e l'aggiornamento dello stato effettivo avviene solo dopo che è stato completato. se si registra in console la variabile di stato all'interno del corpo della funzione, verrà aggiornata al prossimo rendering. per esempio

const Home = () => {
  const [blog, setBlog] = useState([])
  console.log(blog)
  .
  .
  .

La prima volta che viene caricato il componente, il blogvalore verrà impostato su un array vuoto (poiché viene passato come argomento a setState). Quindi verrà chiamato il recupero dei dati e verrà impostato il valore per il blog. Ora il blogvalore sarà l'array che hai recuperato. Puoi usarlo nel rendering.

Dovrai mappare gli elementi nel blog per accedervi. Qualcosa di simile al seguente.

.
.
.
<tbody>
  {blog.map(function (entry) {
    return (
      <tr>
        <td>{entry.id}</td>
        <td>
          <img src={"../../../public/logo512.png"} alt="not available" />
        </td>
        <td>{entry.title}</td>
        <td>{entry.short_desc}</td>
        <td>{entry.author}</td>
        <td>
          <button>Edit</button> <button>Delete</button>{" "}
        </td>
      </tr>
    );
  })}
</tbody>
.
.
.