Сортировка по полю моего Airtable API на React - PullRequest
Новая
       52

Сортировка по полю моего Airtable API на React

0 голосов
/ 24 апреля 2020

Я извлекаю базу данных детских книг через API Airtable.

Пока это мой код (скрывая мой API KEY). Он отображает каждую книгу, но в случайном порядке. Я хочу отсортировать их по годам.

Я пытаюсь следовать документации из Airtable, которая демонстрирует код для сортировки по нескольким полям. Я действительно не знаю, где разместить этот код в моем исходном коде и как его адаптировать. Спасибо за вашу помощь! 

import Hero from '../components/Hero';

class News extends Component {

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

  componentDidMount() {
    fetch('https://api.airtable.com/v0/appYI3FvXw9Isfvj7/Favorites?api_key=API_KEY')
    .then((resp) => resp.json())
    .then(data => {
       this.setState({ books: data.records });
    }).catch(err => {
      // Error :(
    });
  }

  render() {
    return (
      <><Hero title="Children's Books"/>
      <div className="container mt-5">
        <div className="row">
          <div className="col">
            <div className="new-container">
              {this.state.books.map(book => <BookCard {...book.fields} /> )}
            </div>
          </div>
        </div>
      </div>
      </>
    );
  }

}

const BookCard = ({ imageURL, title, year, description, rating, date }) => (
  <div className="card">
    <img className="card-img-top" src={imageURL[0].url} alt="Book cover" />
    <div className="card-body">
      <h5 className="card-title"><strong>{title} ({year})</strong></h5>
      <p className="card-text">
        <small className="text-muted">{date}</small>
      </p>
      <p className="card-text">{description}</p>
      <p className="card-text"><strong>Rating: {rating}/5</strong></p>

    </div>
  </div>
);


export default News;

[Airtable Documentation] https://blog.airtable.com/the-right-sort-of-api-updates/

sort: [
        {field: 'year', direction: 'asc'},
    ],
}).eachPage(function page(records, fetchNextPage) {

}, function done(error) {

});
...