通过 link 参数在 react 中检索数据

Question

我在一个页面上有一个用户列表，我想要实现的是当我单击带有他的 ID 的 link 时呈现用户详细信息。为此，我尝试发送 ID 并使用这样的新请求检索数据：

我的路线：

<Route path='/coupeurs' element={<Coupeurs />} />
<Route path='/coupeurs/add' element={<AddCoupeur />} />
<Route path='/coupeurs/:id' element={<Coupeur />} />

我的清单：

<ul>
    {coupeurs.map(coupeur => (
      <li key={coupeur.id}>
        {coupeur.nom} {coupeur.prenom}
        <div className='coupeur-actions'>
          <Link to={`/coupeurs/${coupeur.id}`}>Voir</Link>
          <Link to={`/coupeurs/${coupeur.id}/edit`}>Editer</Link>
        </div>
      </li>
    ))}
  </ul>

我要显示详情的地方：

  export default function Coupeur(props) {
  console.log(props);
  let { id } = useParams();
  const [coupeur, setCoupeur] = useState(getCoupeurInfoById(id));
  console.log(coupeur);
  return (
    <div>
      <h3>Identifiant :  {id}</h3>
      <h3>Nom :  {coupeur.nom}</h3>
      <h3>Prenom :  {coupeur.prenom}</h3>
      <h3>Statut :  {coupeur.statut}</h3>
    </div>
  )
}

我的 getCoupeurInfoById 函数：

export async function getCoupeurInfoById(id) {
  const docRef = doc(db, "coupeurs", id);
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    console.log("Document data:", docSnap.data());
    return docSnap.data();
  } else {
    // doc.data() will be undefined in this case
    console.log("No such document!");
  }
}

我的页面没有信息，但是当我控制台记录我的变量时，我可以看到结果！你能帮我找到做那种事情的正确方法吗？谢谢

Answer 1

由于 getCoupeurInfoById 是一个 async 函数，它隐含地 returns 一个 Promise 对象，随后 (quickly) 解析并改变 coupeur 状态变量。当您记录它时，您会看到已解析的值。

useState 挂钩需要一个 returns 初始状态值的同步函数。

使用 useEffect 挂钩处理 fetching/computing 的 side-effect 和 coupeur 值。

示例：

export default function Coupeur(props) {
  const { id } = useParams();
  const [coupeur, setCoupeur] = useState(); // <-- initially undefined

  useEffect(() => {
    const getCoupeur = async () => {
      try {
        const coupeur = await getCoupeurInfoById(id);
        setCoupeur(coupeur);
      } catch(error) {
        // handle any rejections/errors/etc
      }
    };

    getCoupeur(); // <-- fetch/compute coupeur value
  }, [id]);

  if (!coupeur) return null; // or loading indicator/etc

  return (
    <div>
      <h3>Identifiant :  {id}</h3>
      <h3>Nom :  {coupeur.nom}</h3>
      <h3>Prenom :  {coupeur.prenom}</h3>
      <h3>Statut :  {coupeur.statut}</h3>
    </div>
  )
}

通过 link 参数在 react 中检索数据

Retrieve data via link parameter in react

parameters

reactjs

react-router-dom