Javascript 如何使单个项目显示在页面上？

我的代码中有一个有趣的bug，我想不出来。它应该是一个简单的React+Firestore设置，在一个页面上列出项目，在下一个页面上显示每个项目的更多详细信息。不幸的是，它只显示列表中第一项的详细信息。 在Firestore文档中，我找到了以下解决方案。它不起作用了

细节

import React, { useState, useEffect } from "react";
import firebase from "./firebase";
import Servis from "./funkc/servisni";

export default function FireDetail({ match }) {
  // console.log(match);
  console.log(match.params.id);
  const [item, setItem] = useState([]);
  const [loading, setLoading] = useState(true);

  const getIt = () => {
    setLoading(true);
    const item = [];
    const docRef = firebase
      .firestore()
      .collection("polja")
      .doc("id", "==", match.params.id);

    docRef.onSnapshot((doc) => {
      if (doc.exists) {
        console.log("Document data:", doc.data());
        setItem(doc.data());
      } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
      }
    });
    setLoading(false);
  };
  useEffect(() => {
    getIt();
  }, [match]);

  if (loading) {
    return <h3>samo malo...</h3>;
  }

  return (
    <div className="container">
      <div>
        Kontakt: tip - email
        <p> {item.Kontakt} </p>
      </div>
      <div>
        <p>Datum rodjenja: {item.Datum}</p>
        {item.Prezime} {item.Ime}
      </div>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“/firebase”导入firebase；
从“/funkc/servisni”导入服务；
导出默认函数FireDetail（{match}）{
//控制台日志（匹配）；
console.log（match.params.id）；
const[item，setItem]=useState（[]）；
const[loading，setLoading]=useState（true）；
常量getIt=（）=>{
设置加载（真）；
常量项=[]；
常数docRef=firebase
.firestore（）
.收藏（“polja”）
.doc（“id”，“==”，匹配.params.id）；
docRef.onSnapshot（（doc）=>{
如果（文件存在）{
log（“文档数据：”，doc.data（））；
setItem（doc.data（））；
}否则{
//在这种情况下，将不定义doc.data（）
log（“没有这样的文档！”）；
}
});
设置加载（假）；
};
useffect（（）=>{
getIt（）；
}，[匹配]；
如果（装载）{
归还萨莫·马洛。。。；
}
返回(
Kontakt：提示-电子邮件
{item.Kontakt}

Datum rodjenja:{item.Datum}

{item.Prezime}{item.Ime}
);
}

名单 列出数据库中所有项的组件

const SORTER = {
  "Prezime A-Z": { column: "Prezime", direction: "asc" },
  "Prezime Z-A": { column: "Prezime", direction: "desc" },
  "Email A-Z": { column: "Kontakt", direction: "asc" },
};
const PAGER = {
  5: { Max: "5" },
  30: { Max: "30" },
  45: { Max: "45" },
};

export default function FireList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [sortBy, setSortBy] = useState("Prezime A-Z");
  const [displayMax, setDisplayMax] = useState("5");
  const [query, setQuery] = useState("");

  // function routeTo() {
  //   const { id } = useParams();
  // }

  const ref = firebase
    .firestore()
    .collection("polja")
    .orderBy(SORTER[sortBy].column, SORTER[sortBy].direction)
    .limitToLast(PAGER[displayMax].column);
  // console.log(ref);
  function getEm() {
    setLoading(true);
    ref.get().then((querySnapshot) => {
      const items = [];
      querySnapshot.forEach((doc) => {
        const item = {
          ...doc.data(),
          id: doc.id,
        };
        items.push(item);
      });
      setItems(items);
      // console.log(items);
      setLoading(false);
    });
  }

  useEffect(() => {
    getEm();
  }, [query, sortBy, displayMax]);

  return (
    <div>
      <div>
        {" "}
        <label>Poredaj</label>
        <select
          value={sortBy}
          onChange={(e) => setSortBy(e.currentTarget.value)}
        >
          <option value="Prezime A-Z"> Prezime A-Z </option>
          <option value="Prezime Z-A"> Prezime Z-A </option>
          <option value="Email A-Z"> Email A-Z </option>
        </select>
      </div>
      <div>
        <label> Max. po stranici </label>
        <select
          value={displayMax}
          onChange={(e) => setDisplayMax(e.currentTarget.value)}
        >
          <option value="5">5</option>
          <option value="30">30</option>
          <option value="45">45</option>
        </select>
      </div>
      <ul>
        <input
          type="text"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        ></input>
      </ul>
      {loading ? <h1>Loading...</h1> : null}

      {items.map((val) => (
        <div key={val.id}>
          <p>
            {val.Ime} {val.Prezime}
            <Link to={`/kontakt/detalji/${val.id}`}> ajd </Link>
          </p>
        </div>
      ))}
    </div>
  );
}

常数分类器={
“Prezime A-Z”：{列：“Prezime”，方向：“asc”}，
“Prezime Z-A”：{列：“Prezime”，方向：“desc”}，
“电子邮件A-Z”：{栏目：“Kontakt”，方向：“asc”}，
};
常数寻呼机={
5:{Max:“5”}，
30:{Max:“30”}，
45:{Max:“45”}，
};
导出默认函数FireList（）{
const[items，setItems]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[sortBy，setSortBy]=使用状态（“Prezime A-Z”）；
const[displayMax，setDisplayMax]=useState（“5”）；
const[query，setQuery]=useState（“”）；
//函数routeTo（）{
//const{id}=useParams（）；
// }
常数参考=火基
.firestore（）
.收藏（“polja”）
.orderBy（分拣机[sortBy]。列，分拣机[sortBy]。方向）
.limitToLast（寻呼机[displayMax].column）；
//控制台日志（ref）；
函数getEm（）{
设置加载（真）；
ref.get（）.then（（querySnapshot）=>{
常量项=[]；
querySnapshot.forEach（（doc）=>{
常数项={
…doc.data（），
id:doc.id，
};
项目。推送（项目）；
});
设置项目（项目）；
//控制台日志（项目）；
设置加载（假）；
});
}
useffect（（）=>{
getEm（）；
}，[query，sortBy，displayMax]；
返回(
{" "}
波雷达斯
setSortBy（e.currentTarget.value）}
>
Prezime A-Z
Prezime Z-A
电子邮件A-Z
马克斯·波斯特拉尼奇
setDisplayMax（e.currentTarget.value）}
>
5.
30
45

setQuery（event.target.value）}
>

{正在加载？正在加载…：null}
{items.map（（val）=>(

{val.Ime}{val.Prezime}
ajd

))}
);
}

应用程序组件，提供导航

  return (
    <BrowserRouter>
      <div className="App">
        login
        <div>
          <Header />
        </div>
        <Route path="/" exact component={Header} />
        <Route path="/adresar" component={FireList} />
        <Route path="/kontakt" exact component={ContactEdit} />
        <Route path="/kontakt/detalji/:id" component={FireDetail} />
      </div>
    </BrowserRouter>
  );
}

export default App;

返回(
登录
);
}
导出默认应用程序；

我认为您必须在每次渲染时读取url参数。这意味着useffect（您的函数，[match]）（这次避免使用[]作为第二个参数）

---

记住，ReactRouter在路由somwhere时不会重新加载或加载页面。除了第一次，一切都在记忆中。

我只想澄清一下，您的意思是，当您单击

FireList

组件中的第一个

链接时，您成功地在
FireDetails
组件中看到了该项目的详细信息，但单击
FireList
中的任何其他
链接时，呈现了
FireDetail
，但没有对象的详细信息？您能分享一下吗你的Firestore的屏幕截图，这样我们就可以克隆我们这边的问题并测试它了？Danoram-就是这样。Dharmaraj-完成：）@ydrea你介意添加一个
console.log（querySnapshot.docs.size）
并检查它的日志吗？我明白你的意思，但它什么都没做…除了console.log（doc.id，=>，doc.data（））；渲染一次？甚至不是那样。console.logs显示第7行的一个日志（match.params.id），然后是第19行的一个日志，然后是第21行的一个空对象，然后是第7行的另外两个日志。。。