как мы можем использовать данные, полученные через запрос axios put на стороне клиента в стеке mern?

#node.js #reactjs #axios #mern

#node.js #reactjs #axios #mern

Вопрос:

Я отправил идентификатор категории в Nodejs с помощью этого кода

 const catHandler = async (catId) => {
    const data =  Axios.put('/api/products/categories/filter',  {catId: catId},
        { 
            "headers": { "content-type": "application/json", },
        }
    ).then( categoriesProducts => {
        console.log(categoriesProducts.data.products)
    })
}
  

и это мой маршрут для этого

 router.put('/categories/filter', async (req, res) => {
    try {
        const findCategory = await Category.find({ _id: req.body.catId });
        if (findCategory) {
            const productsByCategory = await Product.find(
                { category: req.body.catId }
            ).then(products => {
                res.status(200).json({ products });
            })
        }
    } catch (error) {
        console.log('categories filter error', error)
    }
})
  

Продукты определенной категории отображаются console.log(categoriesProducts.data.products) на стороне интерфейса react, как показано ниже

 0: {_id: "5f7c88756746363148792982", name: "Simple Pizza", price: 5.6, image: "1601996916374.jpg", countInStock: 434, …}
1: {_id: "5f7c88976746363148792983", name: "Smoked Pizza", price: 7.8, image: "1601996951114.jpg", countInStock: 88, …}
2: {_id: "5f7c88c56746363148792984", name: "Large Cheezy Pizza", price: 9.4, image: "1601996997474.jpg", countInStock: 434, …}
  

Но я хочу отобразить эти продукты на стороне интерфейса. Я пытался использовать метод axios.get, но с помощью метода get как я могу отправить идентификатор категории в серверную часть. Так что, если у кого-нибудь есть идеи, как это сделать, пожалуйста, помогите мне.

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

1. Если вам нужно отправить данные с помощью запроса get, используйте запросы

Ответ №1:

вы можете использовать параметры запроса с помощью метода get в node js, с помощью которого вы можете получить параметры запроса req.query в NodeJS

пример передачи идентификатора категории из интерфейса —

 api/products/categories/filter?cid=1
  

получение параметра запроса в серверной части

 const catId = req.query.cid
  

Ответ №2:

Вы можете использовать приведенный ниже код для передачи параметра в метод get API.

 fetch("/api/products/categories/filter?catId"   catId)
  .then((res) => res.json())
  .then((json) => {
    this.setState({
      Items: json,
    });
  });
  

А также вы сначала создаете новое состояние с именем Items, например, как показано ниже.

 this.state = {
  Items: []
};
  

И, наконец, итерация по элементам.

BR

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

1. как я могу использовать состояние в функциональном компоненте? и я не могу изменить функциональный компонент на компонент класса, потому что я использую useEffect hook? Итак, что мне теперь делать?

2. Вы можете создать оболочку компонента класса поверх него. Передайте его как реквизит