Javascript 按字母顺序排列，标题在reactjs中

我有一个通过API获取的项目列表，该列表按字母顺序排序，但我想在列表项目上方添加标题。例如像下面的HTML结构

<h4> A</h4 >
<ul>
    <li>Apple</li>
    <li>Ant</li>
</ul>
<h4>B</h4>
<ul>
    <li>Babel</li>
    <li>Ball</li>
</ul>

A

苹果
蚂蚁

B

巴别塔
球

到目前为止，我已经在函数中映射了如下项目列表：

filterItems = (itemList) => {
    result = result.map((item, index) => (
        <li className="brand-item" key={index}><a href="#">
            <img onError={this.nobrandimage} src={item.thumbnail} className="img-responsive" /></a>
        </li>
    ))
    return result;
}

render(){
    //code to get the letterkey, I am not sure how to put this in map function to render**
    var letters = '', groups = {};
    for (var i = 0, len; i < len; i++) {
        var letterKey = brands[i].name.charAt(0).toLowerCase(); // get the first letter
        if (letters.indexOf(letterKey) === -1) {
            letters += letterKey;
            groups[letterKey] = [brands[i]];
        } else {
            groups[letterKey].push([brands[i]]);
        }
    };

    console.log(letters);

    let brands = this.props.brands.all_brands
    if (brands) brands.sort(this.dynamicSort("name"));
    if (brands) len = brands.length
    const filteredList = this.filterItems(brands, letters);
    return (
        <ul>
            {filteredList}
        </ul>
    );
}

filterItems=（项目列表）=>{
结果=结果.映射（（项目，索引）=>(


))
返回结果；
}

下面是我的渲染功能：

filterItems = (itemList) => {
    result = result.map((item, index) => (
        <li className="brand-item" key={index}><a href="#">
            <img onError={this.nobrandimage} src={item.thumbnail} className="img-responsive" /></a>
        </li>
    ))
    return result;
}

render(){
    //code to get the letterkey, I am not sure how to put this in map function to render**
    var letters = '', groups = {};
    for (var i = 0, len; i < len; i++) {
        var letterKey = brands[i].name.charAt(0).toLowerCase(); // get the first letter
        if (letters.indexOf(letterKey) === -1) {
            letters += letterKey;
            groups[letterKey] = [brands[i]];
        } else {
            groups[letterKey].push([brands[i]]);
        }
    };

    console.log(letters);

    let brands = this.props.brands.all_brands
    if (brands) brands.sort(this.dynamicSort("name"));
    if (brands) len = brands.length
    const filteredList = this.filterItems(brands, letters);
    return (
        <ul>
            {filteredList}
        </ul>
    );
}

render（）{
//代码来获取letterkey，我不知道如何把这个在map函数中渲染**
变量字母=''，组={}；
对于（变量i=0，len；i
{filteredList}

);
}

注意：我需要帮助将第一个字母映射到标题标签中的列表。

---

示例应用程序Url以获得更好的视图：

对品牌进行分组后，

组={a:[苹果，蚂蚁]，b:[巴贝尔，球]，…}

您可以迭代以下组：

Object.keys(groups).sort().map(letter, key => (   

    <div key={key}>
        <h4>{letter}</h4>
        <ul>
            {
                groups[letter].map((word, index) => (
                    <li key={index}>{word}</li>
                ))
            }
        </ul>
    </div>


))

Object.keys（groups.sort（）.map（字母，键=>）
{字母}

{
组[字母].map（（单词，索引）=>(
{word}
))
}

))

将您的品牌预处理为地图{letterKey:[brands]}，以便在渲染功能中使用

const groups = brands.reduce((groups, brand) => {
  const letterKey = brand.name.charAt(0).toLowerCase();
  (groups[letterKey] || (groups[letterKey] = [])).push(brand);
  return groups;
}, {});

将[key，brands]的条目映射到无序列表

Object.entries(groups).sort().map(([letterKey, brands]) => (
  <div key={letterKey}>
    <h4>{letterKey}</h4>
    <ul>
      { brands.map(brand => <li key={brand}>{brand}</li>) }
    </ul>
</div>
));

Object.key（groups.map）（字母，key=>）
{字母}

{
组[字母].map（（单词，索引）=>(
{word}
))
}

))

你能创建一个演示来重现一个问题吗？@Justcode请检查这个示例应用程序的url谢谢你的回复，我已经有一个json结构，它没有密钥，所以我正在用这个

if（brands）len=brands.length var letters=''，groups={}生成字母表的第一个字母；对于（var i=0，len；i

我只需要在这个函数中映射

字母

，这个函数是我在render外部编写的

filterietems=（itemList）=>{result=result.map（（item，index）=>（
）返回结果；}

添加了将您的品牌处理为地图的功能，以便在渲染功能中使用。感谢您的快速回复，我在这里为我的代码创建了一个示例。你能看一看，并建议我如何把这一点，因为我无法获得的字母数据以外的渲染功能。[link]（）看起来不像沙盒渲染任何东西，我在控制台中也看不到任何东西。看起来

品牌

或

所有品牌

都是静态数据，只需在构造函数或

组件安装中计算即可。请记住，在构造函数中可以直接设置状态，但在
componentDidMount
中必须调用
setState
。在渲染函数中使用它没有任何意义，因为它将在每次渲染调用时重新计算。事实上，这是反对的。