feng

src/components/Comments/index.js

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 
 const Comments = () => {
+  const doc = useDoc();
   const [rating, setRating] = useState(0);
   const [comment, setComment] = useState('');
   const [comments, setComments] = useState([]);
@@ -15,6 +17,7 @@ const Comments = () => {
           rating,
           text: comment,
           date: new Date().toLocaleString(),
+          docId: doc.id,
         },
       ]);
       setComment('');
@@ -56,24 +59,26 @@ const Comments = () => {
       </form>
 
       <div className={styles.commentsList}>
-        {comments.map((item, index) => (
+        {comments
-          <div key={index} className={styles.commentItem}>
+          .filter((item) => item.docId === doc.id)
-            <div className={styles.commentHeader}>
+          .map((item, index) => (
-              <div className={styles.stars}>
+            <div key={index} className={styles.commentItem}>
-                {[1, 2, 3, 4, 5].map((star) => (
+              <div className={styles.commentHeader}>
-                  <span
+                <div className={styles.stars}>
-                    key={star}
+                  {[1, 2, 3, 4, 5].map((star) => (
-                    className={`${styles.star} ${star <= item.rating ? styles.active : ''}`}
+                    <span
-                  >
+                      key={star}
-                    ★
+                      className={`${styles.star} ${star <= item.rating ? styles.active : ''}`}
-                  </span>
+                    >
-                ))}
+                      ★
+                    </span>
+                  ))}
+                </div>
+                <span className={styles.commentDate}>{item.date}</span>
               </div>
-              <span className={styles.commentDate}>{item.date}</span>
+              <p className={styles.commentText}>{item.text}</p>
             </div>
-            <p className={styles.commentText}>{item.text}</p>
+          ))}
-          </div>
-        ))}
       </div>
     </div>
   );