useParams和useEffect，参数通过${id}在useEffect函数中

Question

这是代码，我在控制台收到了 id，但没有收到 firestore 服务器的响应

import Item from './Item'
import { useState, useEffect } from "react";
import { useParams } from 'react-router-dom';
import {db} from "../Firebase"
import { collection, getDocs, query,} from "firebase/firestore";


const ContainerItems = () => {

    let idParam = useParams();
    const [ dataItem, setDataItem ] = useState([])


useEffect( () => {
    async function fetchData(){
    const querySnapshot = await getDocs(query(collection(db, `category/${(idParam)}/Items` )));
      let dataArray = []
      querySnapshot.forEach((doc) => {
        dataArray.push({...doc.data(), id: doc.id});
      });
      setDataItem(dataArray)
      console.log("Id",idParam)
    }
    fetchData();
}, [idParam])
    return (
        <>
            {dataItem.map((data)=>( 
                <Item item={data} key={data.id}/>
            ))}            
        </>
    )
}

export default ContainerItems;

对服务器的请求有效，只是在我添加 ${idParam} 时无效

Answer 1

您需要使用解构从对象中取出 idParam。

let { idParam }  = useParams();

注意：假设您在 Route 中用相同的名称命名了路径。

<Route path="/category/:idParam">...</Route>

useParams和useEffect，参数通过${id}在useEffect函数中

useParams and useEffect, Parameter via ${id} in the useEffect function

jsx

reactjs

react-hooks