Javascript 如何在单击类别时显示不同的项目列表

我对React JS非常陌生，我需要构建一个简单的UI。我基本上有一个类别列表，如果我点击一个类别，一个项目列表将显示在该类别下。如果单击其他类别，它将隐藏项目列表

我得到了两个API，一个包含类别的JSON，另一个包含项目

我已经设法从API中获取数据，并将它们吐到DOM中。但是，我发现很难将组件组合在一起，以便在单击其类别时仅显示正确的项目

我使用Babel传输我的JSX语法，并使用axios获取数据。目前，我的页面只显示所有项目和所有类别。理解这种状态对我来说很难

对新手和学习者有什么建议吗？谢谢

我的两个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', categoriesResponse.data.data);
        console.log('Item', itemsResponse.data.data);
        th.setState({
            category: categoriesResponse.data.data,
            items : itemsResponse.data.data,
          });
      }));


  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (

        <div className="navigation">
            <h1>Store Cupboard</h1>
            <NavigationCategoryList data={this.state.category} handleChange={this.handleChange}/>
            <NavigationSubCategoryList data={this.state.category} subData={this.state.items} selected_category={this.state.data} />
        </div>
    )
  }
});

var NavigationCategoryList = React.createClass({
    render: function () {
            var handleChange = this.props.handleChange;

        // LOOPS THE CATEGORIES AND OUTPUTS IT
        var links = this.props.data.map(function(category) {
            return (
                <NavigationCategory title={category.title} link={category.id} handleChange={handleChange}/>
            );
        });
        return (
            <div>
                <div className="navigationCategory">
                    {links}
                </div>
            </div>
        );
    }   
});

var NavigationSubCategoryList = React.createClass({
    render: function () {
            var selected = this.props.selected_category;
        var sub = this.props.subData.map(function(subcategory) {
            if(subcategory.categories.title === selected)
            return (
                <NavigationSubCategoryLinks name={subcategory.title} link={subcategory.link}   />
            );
        });                     
        return (
            <div className="subCategoryContainer">
                {sub}
            </div>
        );
    }
});

var NavigationSubCategoryLinks = React.createClass({
    render: function () {
        return (
            <div className="navigationSubCategory" id={this.props.name}>
            {this.props.name}
            </div>
        );
    }
});   



var NavigationCategory = React.createClass({
    render: function () {
            var handleChange = this.props.handleChange;
        return (
            <div className="navigationLink">
                <a href={this.props.link} onClick={handleChange}>{this.props.title}</a>
            </div>
        );
    }
});



ReactDOM.render(<NavContainer />, document.getElementById("app"));

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var axios=需要（“axios”）；
var NavContainer=React.createClass({
getInitialState:函数（）{
返回{
类别：[]，
项目：[]
}
},
//当前选择了什么
手变（e）{
this.setState（{data:e.target.firstChild.data}）；
},
componentDidMount:function（）{
//从API获取数据
var th=这个；
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[]=类别和包括[]=属性和排序=位置和图像大小[]=365和图像大小[]=400和周期id=120'）
])
.then（axios.spread（函数（分类响应、项目响应）{
//…但只有当两个请求都完成时，才会执行此回调。
console.log（'Categories'，categoriesResponse.data.data）；
console.log（'Item'，itemsResponse.data.data）；
塞斯塔({
类别：categoriesResponse.data.data，
项目：itemsResponse.data.data，
});
}));
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
储物柜
)
}
});
var NavigationCategoryList=React.createClass({
渲染：函数（）{
var handleChange=this.props.handleChange；
//循环类别并将其输出
var links=this.props.data.map（函数（类别）{
返回(
);
});
返回(
{links}
);
}   
});
var NavigationSubCategoryList=React.createClass({
渲染：函数（）{
var selected=this.props.selected\u类别；
var sub=this.props.subData.map（函数（子类别）{
如果（子类别.categories.title==选中）
返回(
);
});                     
返回(
{sub}
);
}
});
var NavigationSubCategoryLinks=React.createClass({
渲染：函数（）{
返回(
{this.props.name}
);
}
});   
var NavigationCategory=React.createClass({
渲染：函数（）{
var handleChange=this.props.handleChange；
返回(
);
}
});
ReactDOM.render（，document.getElementById（“app”）；

这是我目前网页上的截图。一切都会在屏幕上显示出来。蓝色的链接是类别

---

我相信我已经为您准备了一个工作版本。为了清晰起见，我更改了一些语法和变量/道具名称，并添加了解释更改的注释

const React=require（'React'）；
const ReactDOM=require（'react-dom'）；
const axios=require（'axios'）；
//这些可能应该从constants.js文件导入
常量类别https://api.gousto.co.uk/products/v2.0/categories';
常数产品https://api.gousto.co.uk/products/v2.0/products?includes[]=类别和包括[]=属性和排序=位置和图像大小[]=365和图像大小[]=400和周期id=120'；
const NavContainer=React.createClass({
//你所有的州都生活在你最高的容器里
//传递给任何需要它的组件
getInitialState（）{
返回{
类别：[]，
项目：[]，
selectedCategoryId:null
}
},
//用于设置selectedCategoryId的泛型方法
//现在可以传递到需要选择类别的任何组件中
//不需要担心处理事件之类的事情
选择类别（类别）{
这是我的国家({
selectedCategoryId:类别
});
},
componentDidMount（）{
this.serverRequest=axios.all([
axios.get（类别和端点），
axios.get（产品\终端）
])
.然后（axios.spread）（（分类响应、项目响应）=>{
console.log（'Categories'，categoriesResponse.data.data）；
console.log（'Item'，itemsResponse.data.data）；
//由于ES6的箭头功能，“This”应该可以工作
这是我的国家({
类别：类别响应e.data.data，
项目：itemsResponse.data.data
});
}));
},
组件将卸载（）{
这是.serverRequest.abort（）；
},
render（）{
//阿布德：总是在解构
常数{
类别，
项目，
选定类别ID
}=本州；
返回(
储物柜
);
}
});
const NavigationCategory=React.createClass({
//防止自然浏览器导航和
//运行从父级传递的“selectCategory”
//用道具传下来的id
//没有查询信息的DOM！
class Nav extends React.Component {

  constructor () {
    super();

    this.state = {
      categories: [
        { title: 'First Category', id: 0 },
        { title: 'Second Category', id: 1 },
        { title: 'Third Category', id: 2 }
      ],
      items: [
        { title: 'Item 1', id: 0, category: { id: 0 } },
        { title: 'Item 2', id: 1, category: { id: 0 } },
        { title: 'Item 3', id: 2, category: { id: 0 } },
        { title: 'Item 4', id: 3, category: { id: 1 } },
        { title: 'Item 5', id: 4, category: { id: 1 } },
        { title: 'Item 6', id: 5, category: { id: 2 } },
        { title: 'Item 7', id: 6, category: { id: 2 } }
      ],
      selectedCategoryId: null
    };

    this.onSelectCategory = this.onSelectCategory.bind(this);
  }

  onSelectCategory(id) {
    this.setState({
      selectedCategoryId: id
    });
  }

  render() {
    const { categories, items, selectedCategoryId } = this.state;
    const deafultCategory = _.first(categories);
    const selectedCategory = _.find(categories, i => i.id === selectedCategoryId) || deafultCategory;    
    return (
      <div>
        <CategoryFilter categories={categories} onSelectCategory={this.onSelectCategory} />
        <ItemList items={items} selectedCategory={selectedCategory} />
      </div>
    );
  }
}

var CategoryFilter = ({ categories, onSelectCategory}) => {
  const links = categories.map(i => (
    <div key={i.id}>
      <a href="#" onClick={() => onSelectCategory(i.id)}>
        { i.title }
      </a>
    </div>
  ));
  return (
    <div>
      { links }
    </div>
  )
};

var ItemList = ({items, selectedCategory}) => {
  const currentItems = items
    .filter(i => i.category.id === selectedCategory.id)
    .map(i => (
      <div key={i.id}>
        { i.title }
      </div>
    ));
  return (
    <div>
      { currentItems } 
    </div>
  );
};


ReactDOM.render(<Nav />, document.getElementById("app"));