Блог

Главная - Вопросы по программированию - Как получить категорию из продукта с помощью хука useEffect?

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

#javascript #reactjs #axios #react-hooks

#javascript #reactjs #axios #реагирующие хуки

Вопрос:

Добрый день, я не могу понять, почему я не могу получить категорию catId из продукта. То есть сначала я создаю useState отдельно для продукта и категории. Затем, используя axios and 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 отдельно протестировал, все работает, например, если передать параметр static id. Я был бы признателен за вашу помощь!

Комментарии:

1. Если вы хотите использовать product в категории, выберите URL. Затем вы должны добавить product в качестве зависимости в useEffect. [продукт]

Ответ №1:

Хук useEffect похож на жизненный цикл, он будет запускаться как componentDidMount, если вы хотите извлекать категории из продукта, вам нужно реорганизовать вызов категории выборки в методе, а не использовать эффект.

Итак, когда вы извлекаете продукт, после того, как вы его получили, вы можете вызвать свой метод для извлечения категории. Это будет что-то вроде этого :

 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
    }

У меня не так много времени, чтобы подробнее проработать код, возможно, вам придется провести рефакторинг, но идея такова. Вы должны вызвать свой метод, когда получите данные о продукте

Метки: