Как получить категорию от продукта через хук useEffect?

Question

[maxzbsss]

Не могу понять, почему не получается получить категорию по 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.

Comments

[Михаил]

категорию нужно получать после получения продукта

Answer 1

[0xD34F]

Вы пытаетесь получать категорию до того, как получен продукт. Т.е., product.catId у вас undefined. Надо добавить продукт как зависимость эффекту в котором получаете категорию, внутри самого эффекта проверять, что идентификатор категории есть - и только в этом случае делать запрос:

useEffect(() => {
  axios.get('/api/products/random-lucky-box').then(r => setProduct(r.data));
}, []);

useEffect(() => {
  if (product.catId) {
    axios.get(`/api/categories/${product.catId}`).then(r => setCategory(r.data));
  }
}, [ product ]);