Question

我似乎无法将某些项目传递给item道具，如果它们与我正在循环的类别有关

我有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道具中传递与该类别相关的项目。我有下面的代码，但它将我的所有数据传递给每个元素，我不知道为什么。

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>
        );
    }
}

所有数据都在那里，在反应开发工具中它说每个元素有667个项目，但我知道体育类别应该只有7个项目。

Answer 1

应用过滤器而不是地图。

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

Answer 2

你可以试试这个，

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>
    );
}

}

使用类别键中的项目传递项目道具

2 个答案: