Блог

Я пытаюсь создать компонент, в котором перечислены мои 3 последних сообщения на Medium. Я хочу, чтобы в нем просто отображался заголовок сообщения и ссылка на сообщение.

Пока у меня есть компонент элемента списка, который называется MediumItem ниже показано, как я его настроил:

 import React from 'react'
import { ExternalLink } from "react-feather"

const MediumItem = (props) => (
    <li><a href={props.url}>{props.title} <ExternalLink/></a></li>
)

export default MediumItem
  

И мой канал настроен следующим образом:

 import React from 'react'
import axios from 'axios'
import MediumItem from './mediumItem'
import { ExternalLink } from "react-feather"

class Medium extends React.Component {

    state = {
        posts: []
    }

    componentDidMount() {
        this.fetchPosts().then(this.setPosts)
    }

    fetchPosts = () => axios.get(`https://cors-anywhere.herokuapp.com/https://us-central1-ryan-b-designs-medium-cors.cloudfunctions.net/medium?username=@RyanABrooks`)

    setPosts = ({data}) => {

        const { Post } = data.payload.references

        const posts = Object.values(Post).map(({ id, title, uniqueSlug}) => Object.assign({}, {
            title,
            url: `https://medium.com/@RyanABrooks/${uniqueSlug}`
        }))

        this.setState({
            posts
        })
    }

    render() {
        return (
            <div>
                <h3>Recent Articles</h3>
                <ul>
                    { this.state.posts.map(({posts}, i) =>
                        <MediumItem key={i} {...posts} />
                    )}
                    <li><a href="https://medium.com/@RyanABrooks">Read More <ExternalLink /></a></li>
                </ul>
            </div>
        )
    }

}

export default Medium
  

У меня возникли проблемы с выяснением, как передать заголовок и URL-адреса компонентам MediumItem и убедиться, что в нем перечислены только последние 3 элемента.

Возможно, что-то вроде этого:

 render() {
  const last3 = this.state.posts.slice(-3);
  { last3.map((post, i) =>       // no need to use {posts} here
       <MediumItem key={i} title={post.title} url={post.url} />
  )}
}
  

Это предполагает структуру для каждого поста как:

 {
  title: 'asdf',
  url: 'https://asdf'
}