#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. Вы можете создать оболочку компонента класса поверх него. Передайте его как реквизит