如果我理解正确的话，你想根据main_category对结果进行分组，以便单独显示它们？在这种情况下，你可以使用下面的例子来让你继续：

"use client";

import { useMemo } from "react";

export default MyComponent(props) {
  const { data = [] } = props;

  const categories = useMemo(() => {
    const results = data.map(entry => entry.main_category);
    return [...new Set(data)]; // using the set constructor removes duplicates
  }, [data]);

  // returns { someCategory: [], otherCategory: [] }
  const dataByMainCategory = useMemo(() => {
    const map = {};    
    for (const category of categories) {
      map[category] = data.filter(entry => entry.main_category === category);
    }
    return map;
  }, [data, categories])

  // rest of your code here
}

字符串
dataByMainCategory将包含一个由所有主要类别及其关联数据组成的对象。
这不一定是客户端组件，可以在服务器上完美运行，特别是如果您不希望数据在客户端运行时发生更改。

我得到了这个工作如下：

const nightOutData = guideData?.night_out_list;

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
var groupedByCat = groupBy(nightOutData, 'main_category')


<div>
  {Object.keys(groupedByCat).map((category,index) => {
    return (
      <div key={index}>
        <h2>{category}</h2>

        {groupedByCat[category].map((memb,i) => {
          return (
            <div key={i}>
              {memb.location_name}
            </div>
          );
        })}

        <hr />
      </div>
    );
  })}
</div>

字符串