Reactjs 传递带有类别键内项目的项目道具

如果某些项目与我正在循环的类别相关，我似乎无法将其传递到

项目
道具中

我有一个类似这样的
JSON
：

{
  "Categories": [
    {
      "Name": "Music",
    },
    {
      "Name": "Comedy",
    },
    {
      "Name": "Sport",
    },
    {
      "Name": "Family",
    },
  ],
  "Items": [
    {
      "Name": "Dolly Parton",
      "NameId": "dolly-parton",
      "Category": "Music",
    },
    {
      "Name": "Cee Lo Green",
      "NameId": "cee-lo-green",
      "Category": "Music",
    },
    {
      "Name": "Take That",
      "NameId": "take-that",
      "Category": "Music",
    },
    {
      "Name": "Football",
      "NameId": "football",
      "Category": "Sport",
    },
    {
      "Name": "Hockey",
      "NameId": "hockey",
      "Category": "Sport",
    }
    ]
}

我正在遍历所有类别，然后将它们打印到一个列表中，同时尝试只在
items
prop中传递与该类别相关的项目。我有下面的代码，但它正在将我的所有数据传递给每个元素，我不知道为什么

class CategoryItems extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        items: this.props.items,
        categories: this.props.categories,
    };

    render() {
        const items = this.state.items;

        return (
            <section className="category-wrapper">
                <div className="container">
                    <div className="category-wrapper__inner">
                        {this.state.categories.map((category, index) => (
                            <CategoryItem
                                key={category.Name}
                                items={items.map((item, index) => {
                                    item.Category === category.Name ? item : '';
                                })}
                            />
                        ))}
                    </div>
                </div>
            </section>
        );
    }
}

类CategoryItems扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
项目：this.props.items，
类别：this.props.categories，
};
render（）{
const items=this.state.items；
返回(
{this.state.categories.map（（category，index）=>(
{
item.Category==Category.Name？项：“”；
})}
/>
))}
);
}
}

所有的数据都在那里，react-dev工具中说每个元素有667个项目，但我知道体育类别中应该只有7个项目。
应用过滤器而不是地图

<CategoryItem
  key={category.Name}
  items={items.filter(i => item.Category === category.Name)}
/>

item.Category===Category.Name）}
/>
您可以试试这个

class CategoryItems extends Component {
constructor(props) {
    super(props);
}

state = {
    items: this.props.items,
    categories: this.props.categories,
};


render() {
    const items = this.state.items;
    const renderList = this.state.categories.reduce((total, category) => {
      const list = items.filter(item => item.Category === category.Name);
        if(list.length > 0){
          total.push(<CategoryItem
            key={category.Name}
            items={list}
        />);
        }
        return total
    },[])
    return (
        <section className="category-wrapper">
            <div className="container">
                <div className="category-wrapper__inner">
                  {renderList}
                </div>
            </div>
        </section>
    );
}

类CategoryItems扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
项目：this.props.items，
类别：this.props.categories，
};
render（）{
const items=this.state.items；
const renderList=this.state.categories.reduce（（总计，类别）=>{
const list=items.filter（item=>item.Category==Category.Name）；
如果（list.length>0）{
total.push（）；
}
返回总数
},[])
返回(
{renderList}
);
}

}
请尝试{this.state.categories.map（（category，index）=>（item.category==category.Name）.map（（item，index=>{item}}}/>）}
item.category==category.Name？项目：''即使
item.Category！==category.Name
。乐意帮忙，乐意编码：）