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.
2 réponses
Essaye ça:
axios.get(`/api/journals/${postId}`)
.then((res) => {
this.setState({journal: res.data})
})
.catch((err) => {
console.log(err);
})
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.