时间戳

首页 > 解决方案 > React - Firebase - 显示单个帖子

reactjs - React - Firebase - 显示单个帖子

问题描述

Firebase 相当新。我创建了一个页面，显示所有帖子，如下所示：

import React, { useState, useEffect } from "react";
import { db } from "../firebase";
import { Link } from "react-router-dom";

function Fire() {
  function useCourses() {
    const [courses, setCourses] = useState([]);

    useEffect(() => {
      const unsubscribe = db
        .collection("courses")
        .get()
        .then((snapshot) => {
          snapshot.forEach((doc) => {
            const newCourses = snapshot.docs.map((doc) => ({
              id: doc.id,
              ...doc.data(),
            }));

            setCourses(newCourses);
          });
        })
        .catch((e) => {
          console.log(e);
        });

      return () => unsubscribe();
    }, []);

    return courses;
  }

  const courses = useCourses();

  return (
    <div className="courses">
      <ul className="courses__list">
        {courses.map((course) => (
          <li
            className="course"
            key={course.id}
            style={{
              backgroundImage: `url(${course.image})`,
            }}
          >
            <h3>
              <Link to={`/courses/${course.id}`} className="course__title">
                {course.title}
              </Link>
            </h3>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Fire;

然后我有一个页面来显示单个帖子，如下所示：

import React, { useState, useEffect } from "react";
import { db } from "../firebase";

function CourseDetail() {
  const [title, setTitle] = useState("");
  const [text, setText] = useState("");

  useEffect(() => {
    const single = db
      .collection("courses")
      .doc("329ddd70-c9bd-11ea-a9d4-39439f5f6cce");

    single
      .get()
      .then(function (doc) {
        if (doc.exists) {
          let { title, main_text } = doc.data();
          setTitle(title);
          setText(main_text);
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
  }, []);

  return (
    <div>
      <h3>{title}</h3>
      <p>{text}</p>
    </div>
  );
}

export default CourseDetail;

当我将特定的 id 放入 .doc() 时，它工作正常。我的问题是如何传递 idLink以显示来自特定帖子的数据（路由器和链接工作正常）。提前致谢。

标签： reactjsfirebase

解决方案

您在链接中正确发送了帖子的 ID

<Link to={`/courses/${course.id}`} >

在用于显示单个帖子的组件中，您可以使用检索此 IDuseParams

import { useParams } from "react-router-dom";
const { courseId } = useParams();

同样在您的路线中，您应该配置接受 courseId 的路径

 <Route path="/courses/:courseId"  component={CourseDetail} />

推荐阅读