如何制作可迭代用于显示不同产品的单个 React 组件。就像一个电子商务网站

Question

我正在尝试建立一个书评网站，我有一个卡片组件，其中包含书名、作者、年份等元素，并且多次使用它来显示编号。的书，但我不知道如何在每次使用卡片时使用不同的书籍详细信息更新每张卡片，并且使用 Axios 从服务器下载详细信息。

Answer 1

我不太清楚你问的问题，但我会试一试。在 React 中，您应该有一个主要组件来呈现所有卡片（即 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 应用程序中，有一个从数据库中检索所有评论的路径，并且 return 它们以序列化格式：

@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

如何制作可迭代用于显示不同产品的单个 React 组件。就像一个电子商务网站

How to make a single react component which can be used iteratively to display different products. Like an e-commerce website

flask

flask-sqlalchemy

reactjs

semantic-ui-react