J'ai le code suivant

import React, { Component } from "react";
import { Link } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";

class Journal extends Component {
  constructor() {
    super();
    this.state = {
      journal: {
        title: "",
        content: "",
        createdAt: ""
      }
    };
  }

  componentDidMount() {
    let postId = this.props.match.params.id;
    axios
      .get("/api/journals/" + postId)
      .then(journal => this.setState({ journal }))
      .catch(error => {
        console.log(error);
      });
  }

  delete(id) {
    let postId = this.props.match.params.id;
    swal({
      title: "Are you sure?",
      text: "Once deleted, you will not be able to recover this journal!",
      icon: "warning",
      buttons: true,
      dangerMode: true
    }).then(willDelete => {
      if (willDelete) {
        axios.delete("/api/journals/" + postId).then(result => {
          this.props.history.push("/journals");
        });
        swal("Poof! Your journal has been deleted!", {
          icon: "success"
        });
      } else {
        swal("Your journal is safe!");
      }
    });
  }

  render() {
    return (
      <>
        <div className='p-12 text-gray-800'>
          <section className='max-w-3xl m-auto'>
            <article>
              <div className='text-center'>
                <h1 className='title'>{this.state.journal.title}</h1>

                <span className='text-sm'>{this.state.journal.createdAt}</span>
              </div>

              <div className='text-sm mt-10 mb-4'>
                {this.state.journal.content}
              </div>
            </article>

            <div className='mt-8 mx-auto text-center w-full'>
              <hr />
              <div className='my-4'>
                <Link
                  to={`/dashboard/journals/${this.props.match.params.id}/edit`}
                  className='btn btn-edit'
                >
                  Edit
                </Link>
                <span className='text-gray-200 mx-4'>|</span>
                <button
                  onClick={this.delete.bind(this)}
                  className='w-20 btn btn-delete'
                >
                  Delete
                </button>
              </div>
              <hr />
            </div>
          </section>
        </div>
      </>
    );
  }
}

export default Journal;

L'utilisation de l'extraction de toutes les données de setState est rendue, c'est-à-dire

fetch("/api/journals/" + postId)
 .then(res => res.json())
 .then(journal => this.setState({ journal }))
 .catch(error => {
   console.log(error);
});

Cela marche.

Cependant, comme je retourne une réponse JSON, Axios semble le meilleur choix. De plus, je cherche à l'utiliser de toute façon.

Mais pour autant que je sache, je configure correctement l'état à l'aide d'axios et j'obtiens une réponse de 200, mais les données ne s'affichent pas.

0
user8331511 3 nov. 2019 à 22:22

2 réponses

Essaye ça:

axios.get(`/api/journals/${postId}`)
.then((res) => {
    this.setState({journal: res.data})
})
.catch((err) => {
    console.log(err);
})
0
radihuq 3 nov. 2019 à 20:08

Considérez que vous obtenez un single journal en tant que json dans le corps de la réponse.

Si vous écrivez comme ça

axios
  .get("/api/journals/" + postId)
  .then(journal => this.setState(journal.data))
  .catch(error => {
    console.log(error);
});

journal est une réponse ici, vous pouvez donc accéder aux données par journal.data .

Puisque la réponse est ici un objet et que les données sont l'attribut, vous pouvez accéder directement aux données comme { data }. Vous pouvez donc également écrire.

  axios
    .get("/api/journals/" + postId)
    .then(({ data }) => this.setState({ data }))
    .catch(error => {
    console.log(error);
  });

Dans le cas où votre réponse est un tableau, vous pouvez obtenir sa valeur par response.data.

J'espère que cela t'aides. Vous pouvez l'améliorer si vous avez autre chose à ajouter.

0
PkSharmaPokhrel 3 nov. 2019 à 20:16