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

【问题标题】：How to get a category from a product using the useEffect hook?如何使用 useEffect 挂钩从产品中获取类别？
【发布时间】：2020-11-21 10:07:49
【问题描述】：

下午好，我不明白为什么我无法从产品中获得catId 的类别。也就是说，首先我为产品和类别分别创建一个useState。然后，使用axios 和useEffect，我通过我的API 通过slug 获取产品。（产品一切正常，一切都很酷）接下来我也想获取类别，需要传递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 App

P.S. ：API 单独测试一切正常，例如，如果您传递静态 id 参数。非常感谢您的帮助！

【问题讨论】：

如果您想在类别获取 URL 中使用产品。然后你应该在 useEffect 中添加产品作为依赖项。 [产品]

标签： javascript reactjs axios react-hooks

【解决方案1】：

useEffect hook 就像一个生命周期，它会像 componentDidMount 一样启动，如果你想从产品中获取类别，你需要在一个方法中重构你的 fetch category 调用，而不是 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
    }

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

【讨论】：