小编ger*_*res的帖子

我是React JS的新手,我需要构建这个简单的UI.我基本上有一个类别列表,如果我点击一个类别,项目列表将显示在该类别下.如果我点击另一个类别,它将隐藏项目列表.

我提供了两个API,一个包含类别的JSON,另一个包含项目.

我已经设法从API中获取数据并将其吐出DOM.但是我发现很难将组件拼凑在一起,只在单击类别时才显示正确的项目.

我正在使用Babel来转换我的JSX语法并使用axios来获取数据.目前我的页面只会吐出所有项目和所有类别.理解国家对我来说很难.

对新手Reactjs更精简的任何建议？谢谢!

我的两个API可以在我的代码中找到,因为我没有足够的重复点来发布链接.

我的JSX:

var React = require('react');
var ReactDOM = require('react-dom');
var axios = require('axios');



var NavContainer = React.createClass({

  getInitialState: function() {
    return {
      category: [],
      items: []
    }
  },

  // WHAT IS CURRENTLY SELECTED
    handleChange(e){
        this.setState({data: e.target.firstChild.data});
    },

  componentDidMount: function() {
    // FETCHES DATA FROM APIS
    var th = this;
    this.serverRequest = 
      axios.all([
        axios.get('https://api.gousto.co.uk/products/v2.0/categories'),
        axios.get('https://api.gousto.co.uk/products/v2.0/products?includes[]=categories&includes[]=attributes&sort=position&image_sizes[]=365&image_sizes[]=400&period_id=120')
      ])
      .then(axios.spread(function (categoriesResponse, itemsResponse) {
        //... but this callback will be executed only when both requests are complete.
        console.log('Categories', …