为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 useEffect 挂钩从产品中获取类别?

如何使用 useEffect 挂钩从产品中获取类别?

慕容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

    }


我没有太多时间详细说明代码,您可能需要重构,但想法就是这样。您应该在获取产品数据时调用您的方法


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 158 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信