React Axios 是从 WordPress REST 获取单个 post 的更好方法

Question

我正在使用以下内容从 WordPress REST API.

中获取单个 post

import React, { Component } from 'react';
import axios from 'axios';

class Post extends Component {

    constructor() {
    super();
    this.state = {
      post: [],
    };
  }

  componentDidMount() { 
    axios.get('http://example.com/wp-json/wp/v2/posts?slug=some-post')
    .then(response => {
      this.setState({ post: response.data });
    })
    .catch(error => {
        console.log(error);
    });
    }

  render() {
    return (

      <div>
        {this.state.post.map(single => {
            return(
            <div>
              <h1>{single.title.rendered}</h1>
              <p>{single.content.rendered}</p>
            </div>                                        
            );
        })}
      </div>
    );
  }
}

export default Post;

是否有 better/more 直接渲染 post 而不映射数组的方法？

Answer 1

如果api returns数组那么你只能取第一个元素，f.e.:

this.setState({ post: response.data[0] });

当然你应该使用一些条件渲染（地图适用于空数组）：

if(!this.state.post) return <Loading />

React Axios 是从 WordPress REST 获取单个 post 的更好方法

React Axios better way to get single post from WordPress REST

wordpress

reactjs

wordpress-rest-api

axios