需要帮助根据属性将两个数组与对象映射在一起

Question

我试图基于两个不同的数组创建多个列表。 我有一个名为 categoryList 和 termsList 的数组。 我想根据 categoryList 数组的属性将术语列表分组。

const categoriesList = [
   { name: 'Categories', slug: 'category' },
   { name: 'Tags', slug: 'post_tag' }
];

和

const termsList = [
   { id: 1, taxonomy: 'category', name: 'First category' },
   { id: 2, taxonomy: 'category', name: 'Second category' },
   { id: 3, taxonomy: 'post_tag', name: 'First tag' },
   { id: 4, taxonomy: 'post_tag', name: 'Second tag' }
];

categoryList 中的属性slug 始终与termsList 中的taxonomy 属性具有相同的值。 我想要完成的是在 React 组件中：

<h1>Categories</h1>
<ul>
   <li>First category</li>
   <li>Second category</li>
</ul>

<h1>Tags</h1>
<ul>
   <li>First tag</li>
   <li>Second tag</li>
</ul>

我不知道该怎么做。 一些帮助将不胜感激。 谢谢！

Answer 1

你可以使用这样的东西来使它工作：

 const categoriesList = [ { name: 'Categories', slug: 'category' }, { name: 'Tags', slug: 'post_tag' } ]; const termsList = [ { id: 1, taxonomy: 'category', name: 'First category' }, { id: 2, taxonomy: 'category', name: 'Second category' }, { id: 3, taxonomy: 'post_tag', name: 'First tag' }, { id: 4, taxonomy: 'post_tag', name: 'Second tag' } ]; const result = categoriesList .map(cl => ({ [cl.name]: termsList.filter(tl => tl.taxonomy === cl.slug), })) .reduce((a, b) => ({ ...a, ...b })); console.log(res); // Result of console.log(res); // // { // Categories: [ // { // id: 1, // taxonomy: 'category', // name: 'First category', // }, // { // id: 2, // taxonomy: 'category', // name: 'Second category', // }, // ], // Tags: [ // { // id: 3, // taxonomy: 'post_tag', // name: 'First tag', // }, // { // id: 4, // taxonomy: 'post_tag', // name: 'Second tag', // }, // ], // };

Answer 2

这是一个小的工作 React 示例：

 class App extends React.Component { // Accepts an array of terms, and a slug getTermList(terms, slug) { return terms // It `filter`s out the terms by slug value .filter(({ taxonomy }) => taxonomy === slug) // And then `map`s those filtered values to <li>s .map(({ name }) => <li>{name}</li>); } render() { const { categories, terms } = this.props; return ( // `map` over the categories, and return a // list of terms based on the slug value categories.map(({ name, slug }) => { return ( <div class="category"> <h1>{name}</h1> <ul> {this.getTermList(terms, slug)} </ul> </div> ); }) ); } } const categories = [ { name: 'Categories', slug: 'category' }, { name: 'Tags', slug: 'post_tag' } ]; const terms = [ { id: 1, taxonomy: 'category', name: 'First category' }, { id: 2, taxonomy: 'category', name: 'Second category' }, { id: 3, taxonomy: 'post_tag', name: 'First tag' }, { id: 4, taxonomy: 'post_tag', name: 'Second tag' } ]; ReactDOM.render( <App categories={categories} terms={terms} />, document.querySelector("#app") );

 .category { margin: 1em; } h1 { font-size: 1.2em; font-weight: 600; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>