慕容3067478
2023-08-24 17:13:50
catId下午好,我不明白為什么我無法從產品中獲取類別。也就是說,首先我useState分別為產品和類別創建一個。然后,使用axios和useEffect,我通過 slug 通過我的 API 獲取產品。(產品一切都好,一切都很酷)接下來我也想獲取類別,我需要傳遞參數catId,并且從之前收到的產品中不起作用。下面是代碼:import logo from './logo.svg'import './App.css'import React, {useState, useEffect} from 'react'import axios from 'axios'const App = () => { const [product, setProduct] = useState({}) const [category, setCategory] = useState({}) useEffect(() => { const fetchProduct = async () => { const {data} = await axios.get('/api/products/random-lucky-box') setProduct(data) } fetchProduct() }, []) useEffect(() => { const fetchCategory = async () => { const {data} = await axios.get(`/api/categories/${product.catId}`) setCategory(data) } fetchCategory() }, []) return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Название: {product.name} <br /> Цена: {product.price} </p> </header> </div> )}export default AppPS:API 單獨測試了一切正常,例如,如果您傳遞靜態 id 參數。我將非常感謝您的幫助!
1 回答

湖上湖
TA貢獻2003條經驗 獲得超2個贊
useEffect hook 就像一個生命周期,它將像 componentDidMount 一樣啟動,如果您希望從產品中獲取類別,您需要在方法中重構您的獲取類別調用,而不是 useEffect。
所以當你獲取產品后,你可以調用你的方法來獲取類別。它將是這樣的:
useEffect(() => {
const fetchProduct = async () => {
const {data} = await axios.get('/api/products/random-lucky-box')
setProduct(data)
fetchCategory(data.categoryId)
}
}, [])
const fetchCategory = async (catId) => {
const {data} = await axios.get(`/api/categories/${catId}`)
// set your state or whatever
}
我沒有太多時間詳細說明代碼,您可能需要重構,但想法就是這樣。您應該在獲取產品數據時調用您的方法
添加回答
舉報
0/150
提交
取消