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;

使用从setState获取的所有数据进行渲染，即

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

这有效。

但是，当我返回JSON响应时，Axios似乎是更好的选择。另外，无论如何我都希望使用它。

但是据我所知，我正在使用axios正确设置状态，并且收到200响应，但数据未显示。

Answer 1

尝试一下：

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

Answer 2

考虑您在响应正文中以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获得其值。

希望这会有所帮助。如果您要添加其他内容，则可以进行改进。

未从axios呈现的响应在react中获得请求

2 个答案: