Ответ не отрисовывается от axios, получает запрос в ответ

Question

У меня есть следующий код

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;

Используя fetch, обрабатываются все данные из setState, т.е.

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

Это работает.

Однако, какЯ возвращаю ответ в формате JSON. Аксиос кажется лучшим выбором. Кроме того, я все равно хочу использовать его больше.

Но, насколько я знаю, я правильно устанавливаю состояние с помощью axios и получаю ответ 200, но данные не отображаются.

Answer 1

Предположим, вы получаете один журнал в виде json в теле ответа.

Если вы напишите так:

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

журнал - это ответздесь, так что вы можете получить доступ к данным с помощью journal.data .

Поскольку ответ здесь - это объект, а данные - это атрибут, вы можете напрямую обращаться к таким данным, как { data }. Таким образом, вы также можете написать.

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

Если ваш ответ является массивом, вы можете получить его значение по response.data.

Надеюсь, это поможет. Вы можете улучшить его, если у вас есть что добавить.

Answer 2

Попробуйте это:

axios.get(`/api/journals/${postId}`)
.then((res) => {
    this.setState({journal: res.data})
})
.catch((err) => {
    console.log(err);
})