Question

sooooo我一直在使用React和Firebase进行学校项目。问题是我用Firestore数据创建了DOM元素，但是无论路径如何，它都会运行该函数，但我希望仅在路径为“ / journal”时才运行，而在其他路径中则不希望运行。这是app.js

import "./styles/base/App.css";
import "./styles/pages/index.css";
import Nav from "./pages/nav";
import Journal from "./pages/journal";
import Authors from "./pages/authors";
import CreateArticle from "./pages/articles/create";
import ArticlesDetails from "./pages/articles/articles pages/articlesdetails";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Index} />
          <Route path="/journal" exact component={Journal} />
          <Route path="/articles/create" exact component={CreateArticle} />
          <Route path="/articles/:id" exact component={ArticlesDetails} />
          <Route path="/authors" exact component={Authors} />
        </Switch>
      </div>
    </Router>
  );
}

这是路径为“ / journal”时呈现的内容

import "../styles/base/App.css";
import "../styles/pages/journal/Journal.css";
import firebase from "../firebase";
const db = firebase.firestore();

db.collection("articles")
  .limit(4)
  .get()
  .then((snapshot) => {
    snapshot.docs.forEach((doc) => {
      renderArticle(doc);
    });
  });
const articlelist = document.querySelector("#articles");
//create element and render in article page
function renderArticle(doc) {
  let listitem = document.createElement("li");
  let title = document.createElement("h3");
  let author = document.createElement("h6");

  listitem.setAttribute("data-id", doc.id);
  author.textContent = "Wrote by - " + doc.data().author;
  title.textContent = doc.data().title;

  listitem.appendChild(title);
  listitem.appendChild(author);

  articlelist.appendChild(listitem);
} 

function Journal() {
  return (
    <div className="journalbody">
      <header className="journal-header">
        <div className="journal-title">
          <h1>Our Journal</h1>
          <h6>Surf into articles wrote by our students !</h6>
        </div>
      </header>

      <div className="recent" id="recent">
        <div className="recent-content">
          <h3>Recent Article</h3>
          <a href="#">
            See All articles
          </a>
          <ul id="articles"></ul>
        </div>
      </div>
 
      
  );
}
export default Journal;

唯一的问题是，当路径不是“ / journal”时，它将运行功能“ renderArticle”，从而弄乱了其他页面

对不起，因为文本和拼写错误，如果有解决办法，请先谢谢您

Answer 1

您可以直接在JSX中使用for循环（在docs上）。

只需获取数据，将其添加到您的状态，然后在JSX中使用即可。见下文

不太确定为什么下面的代码会返回错误（我第一次在这里尝试使用React钩子），但是您可以在此处检查代码-> sandbox

function App() {
  const [snapshotDocsState, setSnapShot] = React.useState([]);
   React.useEffect(() => {
    // const snapshot = await db.collection("articles").limit(4).get()
    const snapshot = {
      docs: [
        {
          id: 1,
          author: "First Author",
          title: "Doc 1"
        },
        {
          id: 2,
          author: "Second Author",
          title: "Doc 2"
        },
        {
          id: 3,
          author: "Third Author",
          title: "Doc 3"
        }
      ]
      }
    setSnapShot(snapshot.docs);
  }, []);

  return (
    <div>
      <ul id="articles">
        {snapshotDocsState.map((doc, index) => (
          <li key={doc.id} data-id={doc.id}>
            <h3>{doc.title}</h3>
            <h6>{doc.author}</h6>
          </li>
        ))}
      </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

不需要时进行功能渲染

1 个答案: