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

Question

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 参数。我将非常感谢您的帮助！

Answer 1

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

    }

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