Как сделать единый реагирующий компонент, который можно итеративно использовать для отображения разных продуктов. Как веб-сайт электронной коммерции - PullRequest
Новая
       131

Как сделать единый реагирующий компонент, который можно итеративно использовать для отображения разных продуктов. Как веб-сайт электронной коммерции

0 голосов
/ 20 июня 2020

Я пытаюсь создать веб-сайт обзора книги, у меня есть компонент карточки, который имеет такие элементы, как название книги, автор, год и т. Д. c, и он используется несколько раз, чтобы показать нет. книг, но я не знаю, как обновлять каждую копию карты разными данными книги каждый раз, когда карта используется, и данные загружаются с сервера с помощью Ax ios.

1 Ответ

0 голосов
/ 20 июня 2020

Я немного не понимаю вопрос, который вы задаете, но я попробую. В качестве реакции у вас должен быть главный компонент, который отображает все карточки (например, BookReviews). Этот компонент должен иметь внутреннее состояние, возможно, массив объектов, содержащих обзор. Вы должны получить этот массив из Flask, когда компонент монтируется, а затем вы должны визуализировать каждую карту отдельно.

Например: 


const BookReview = ({review: {id, name, rating}) => {
   return (
      <div className="card">
          {name}
      </div>
   );
}

const BookReviews = () => {
   const [reviews, setReviews] = React.useState([]);
   
   React.useEffect(() => {
      // fetch reviews using ajax request and call setReviews with result
   })


   return (
      <div className="book-reviews">
      {reviews.map(i => <BookReview key={i.id} review={i} />}
      </div>
   );
}

Затем в вашем приложении flask создайте маршрут для получения всех обзоров из базы данных и возврата их в сериализованном формате: 

@app.route('/reviews')
def book_reviews():
   return jsonify(reviews=[{'id': i.id, 'name': i.name, 'stars': i.stars} for i in BookReview.query.all()]), 200
...