Question

需要呈现包含对象的数组->的数组

在JSX / HTML上，对于每个子数组，我都应该有一个<li></li>标签，当渲染该子数组时，该标签内应从数组中渲染对象，我应该继续移动下一个数组并渲染下一个数组在新的<li></li标签中

我的问题是所有子数组都呈现在一个<li></li>内：

renderList = () => {
   return searchHelpers.logicalExamples.map((tagsArray) =>
      tagsArray.map((tag, i) => (
        <li className="label">
          <button>
            <span className="selected">{tag.name}</span>
          </button>
        </li>
      ))
    );
  };

这是用于呈现列表的对象：

const searchHelpers = {
  logicalExamples: [
    [
      { name: 'TX Group', tagTypeClass: '' },
      { name: 'AND', tagTypeClass: 'operator' },
      { name: 'Latest News', tagTypeClass: 'new-tag' }
    ],
    [
      { name: 'Pochettino', tagTypeClass: '' },
      { name: 'NOT', tagTypeClass: 'operator' },
      { name: 'Mourinho', tagTypeClass: '' }
    ],
    [
      { name: 'Cristobal Huet', tagTypeClass: '' },
      { name: 'OR', tagTypeClass: 'operator' },
      { name: 'Nico Hischier', tagTypeClass: '' }
    ],
    [
      { name: '(', tagTypeClass: 'new-tag' },
      { name: 'Climate Change', tagTypeClass: 'new-tag' },
      { name: ')', tagTypeClass: 'new-tag' }
    ]
  ]
};

Answer 1

因此，您希望{ "query": {...}, "aggs": { "my_buckets": { "composite": { "sources": [ { "my_key1": { "terms": { "field": "key1" } } }, { "my_key2": { "terms": { "field": "key2" } } }, ... ] } } } }的每个元素都呈现为{ "aggregations": { "my_buckets": { "after_key": {...}, "buckets": [ { "key": { "key1": "value1", "key2": "value4" }, "doc_count": 10 }, { "key": { "key1": "value1", "key2": "value5" }, "doc_count": 10 }, ...all combinations of unique value ] } } }。看起来像这样：

logicalExamples

对于<li>的每个元素，您都需要一个renderList = () => { return searchHelpers.logicalExamples.map((tagsArray) => <li className="label"> // something goes here </li> ); };：

tagsArray

Answer 2

我喜欢在这种情况下使用/创建一个flatMap函数。我相信lodash有一个，但是如果您不想捆绑在这么大的库中，它就足够小了：

function flatMap(items, fn) {
  return items.reduce((result, item, i) => result.concat(fn(item, i)), []);
}

您可以像这样使用它：

renderList = () => flatMap(searchHelpers.logicalExamples, (tagsArray) =>
  tagsArray.map((tag, i) => (
    <li className="label">
      <button>
        <span className="selected">{tag.name}</span>
      </button>
    </li>
  ))
);

不过，请不要忘记添加key！

更新：

好的，您之前需要的内容不清楚。您所需要做的就是：

renderList = () => searchHelpers.logicalExamples.map((tagsArray) => (
  <li className="label">
    {tagsArray.map((tag, i) => (
      <button>
        <span className="selected">{tag.name}</span>
      </button>
    ))}
  </li>
));

如何在react中渲染数组的数组

2 个答案: