Я воткнул изменение методов. Правильно получить JSON обычному методу - PullRequest
0 голосов
/ 22 марта 2020

введите описание изображения здесь

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 функции.

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

...