안녕하세요. 내 코드에 문제가 있습니다. URL이 완벽하게 로드되었음에도 불구하고 어떤 이유로 후크가 내 변수에 데이터를 할당하지 않습니다.
이 문제에 영향을 미치는 코드 조각과 완벽하게 작동하는 API를 배치하겠습니다.
API(예):
http://127.0.0.1:8000/api/inventory/item/raw_material/1/
APP.js
<div className="App-container_map"> {selectedProduct ? ( <Routes> {/* Define the routes for each category */} <Route path="/raw_material" <------ element={<RawMaterial onReset={handleResetProduct} />} /> <Route path="/consumibles" <------ element={<Consumibles onReset={handleResetProduct} />} /> {/* Add more routes for other categories as needed */} </Routes> ) : ( <div> <Link to={'/Inventory'}> <button>Inventory</button> </Link> <Link to="/"> <button>Some Other Subject</button> </Link> </div> )} </div>
RawMaterial.JS
const RawMaterial = ({ onReset }) => { const { category, id } = useParams() const [ productDetails, setProductDetails ] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchDetailedItem = async () => { try { const details = await fetchSpecificDetailedItem(category, id); setProductDetails(details); } catch (error) { setError(error.message); } finally { setLoading(false); } };
API.js
export const fetchSpecificDetailedItem = async (category, id) => { if (!category || !id) { console.error('Error: Category or ID is not defined', { category, id }); throw new Error('Category or ID is not defined'); } try { const url = `${BASE_URL}/item/${category.toLowerCase()}/${id}/`; console.log('Requesting URL:', url); const response = await axios.get(url); return response.data; } catch (error) { console.error('Error fetching specific item details:', error); throw error; } };
추가 정보가 필요하면 제공하겠습니다.
해당 URL에 대한 console.log를 만들면 똑같은 URL이 나타나는데, 문제가 여기 어딘가에 있는 게 틀림없는 이유는 모르겠습니다.
또한 경로에 "/raw_material/id/"를 사용하지 않았습니다. 클릭 기능을 사용해도 아무 일도 일어나지 않기 때문입니다. 반응에는 아무런 경로가 없는 것 같습니다.
위 내용은 후크 문제(useParams)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!