返回错误顺序的Axios异步函数

Question

当通过getProvinces()在func initProvinces()上使用异步函数axios.get时，不按字母顺序检索provinceCities，这与func initProvinces()中的顺序不同。

如何更改getProvinces()以按字母顺序返回provinceCities？

使用Axios使用getProvinces():获取数据

    export async function getProvinces() {
      const result = await axios.get(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/info/provinces`
      );
    
      return result.data;
    }

带有数据的Golang函数initProvinces()：

func initProvinces() {

    provinceCities = make(map[string][]string)

    //Anhui
    provinceCities["安徽省"] = []string{"安庆市", "蚌埠市", "亳州市", "巢湖市", "池州市", "滁州市", "阜阳市", "广德市", "合肥市", "淮北市", "淮南市", "黄山市", "界首市", "六安市", "马鞍山市", "明光市", "宁国市", "潜山市", "宿州市", "天长市", "桐城市", "铜陵市", "芜湖市", "无为市", "宣城市"}

    //Beijing
    provinceCities["北京市"] = []string{"北京市"}
...
}

省的名单要大得多，我刚把前两个省列了出来。

console.log of the data:

(33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {province: '黑龙江省', cities: Array(33), autoPopulate: false}
1: {province: '天津市', cities: Array(1), autoPopulate: true}

比较而言，索引0是'黑龙江省'，而它应该是"安徽省“。

Answer 1

根据我可以告诉您的，有几个选项可以对数据进行排序：

• 返回已从API排序的数据。
• 接收到UI代码后，在本地对其进行排序

我不熟悉GoLang与API端的排序(虽然我假设排序仍然是一个琐碎的调用)，但这里有一个用javascript对应用程序端的响应数据进行排序的示例。

使用自定义比较器来使用province比较String.prototype.localeCompare属性。请注意，您可能还需要指定locales和options参数来自定义行为以适应您使用的语言。

const compareByProvince = (a, b) => a.province.localeCompare(b.province);

export async function getProvinces() {
  const result = await axios.get(
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/info/provinces`
  );

  return result.data.sort(compareByProvince);
}

• Array.prototype.sort
• 对非ASCII字符进行排序
• String.prototype.localeCompare

Answer 2

前端解决方案:当将数据分配给要传递给provinces.jsx文件的支柱时，我们已经使用.map()将相关信息输入组件的返回。

因此，在映射信息之前，我使用.sort()对信息进行排序。它在映射时不起作用，然后对它进行排序。

代码的最后一行如下所示：

const PROVINCE_OPTIONS = provinces.sort((x,y)=>x.province.localeCompare(y.province, 'zh-CN')).map((item) => item.province)