react，如何将新的数据加入到antd mobile的IndexBar序列的顶部？

Question

在使用的react版本如下：

已写的代码：

import React from 'react';
import { IndexBar, List } from 'antd-mobile';

const charCodeOfA = 'A'.charCodeAt(0);
const groups = Array(26)
    .fill('')
    .map((_, i) => ({
    title: String.fromCharCode(charCodeOfA + i),
    items: [],
}));
export default () => {
    return (<div style={{ height: window.innerHeight - 45 }}>
      <IndexBar>
        {groups.map(group => {
            const { title, items } = group;
            return (<IndexBar.Panel index={title} title={`${title}`} key={`${title}`}>
              <List>
                {items.map((item, index) => (<List.Item key={index}>{item}</List.Item>))}
              </List>
            </IndexBar.Panel>);
        })}
      </IndexBar>
    </div>);
};

目前效果：

希望实现以下效果——自动添加#和hot到右边列顶部，且在左边内容区域显示当前城市和热门城市两项标题：

请问代码应该如何修改？

Answer 1

这个 不就是 groups 生成的 。你要加 热 那就 给 groups 里加一项，加到最前面 。然后 items 加入数据就行。
[{title:"热"，itemes:[xxx]}]

let s = {
                title: "热", items: [{
                    // "label": "天津",
                    // "value": "AREA|re",
                    // "pinyin": "tianjin",
                    // "short": "tj"
                }]
            };
            setGroups([s,...v]);

对了 useEffetc 这里 你需要
useEffect(() => {},[]) 这样写 ，之前给你的例子有的小问题 。你把 回调里的groups 去掉 。要不然 会重复执行很多次

噢 如果 有key值的警告就把 s加个key值

然后 key 这么写 key || title 。因为不加会有警告