введите описание изображения здесь
export default class App extends Component {
state = {
currentCategory: "",
products: [],
cart: []
};
componentDidMount() {
this.getProducts();
}
changeCategory = category => {
this.setState({
currentCategory: category.categoryName
});
this.getProducts(category.id);
};
getProducts = categoryId => {
let url = "http://localhost:3000/products";
if (categoryId) {
url += "?categoryId=" + categoryId;
}
fetch(url)
.then(response => response.json())
.then(data => this.setState({
products: data
}));
};
//////////////////////////////// //////////////////////
export default class App extends Component {
state = {
currentCategory: "",
products: [],
cart: []
};
componentDidMount() {
this.getProducts();
}
changeCategory = category => {
this.setState({
currentCategory: category.categoryName
});
this.getProducts(category.id);
};
getProducts = (categoryId) => {
var item = db.products;
console.log(item.categoryId);
this.setState({
products: item
});
}
}
///// Json формат, как показано ниже //////
{
"products": [{
"id": 1,
"categoryId": 1,
"productName": "Chai",
"quantityPerUnit": "48 - 6 oz jars",
"unitPrice": 23,
"unitsInStock": 53
}],
"categories": [{
"id": "1",
"categoryName": "Beverages",
"seoUrl": "beverages"
}]
}
в этой первой части работает правильно, когда я получаю данные из API. Но когда я хочу получить json данные из локальной сети, это нормально, но я не могу работать как первый метод. При первом методе фильтруйте продукты по categoryId
, но я не могу обработать этот фильтр.
console.log(item.categoryId);
с помощью этого кода, я пытаюсь посмотреть, могу ли я получить правильный идентификатор элемента на консоли, но я могу видеть только неопределенный, и если я использую this.setState({products:item.categoryId});
тогда я получаю ошибку около map
функции.
на этой картинке, когда я щелкаю одну из категорий слева, ее фильтр фильтрует правую сторону товаров. Я могу использовать только первый код, который я не могу изменить должным образом.