reactjs 排序reactj中的嵌套对象列表

lpwwtiir 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(116)

我有以下数据：

planets: [
          {
            planetName: '1',
            countries: [
              {
                countryName:'1';
                population: 432,
                worth: 65,
              },
              {
                countryName:'2';
                population: 9000,
                worth: 10,
              },
              {
                countryName:'3';
                population: 80,
                worth: 200,
              }
            ],
          },
         {
            planetName: '2',
            countries: [
              {
                countryName:'1';
                population: 80,
                worth: 100,
              },
              {
                countryName:'2';
                population: 800,
                worth: 1,

              },
              {
                countryName:'3';
                population: 88,
                worth: 77,
              }
            ],
          },
        ],

我想根据人口或价值对每个行星上的国家进行排序，并获得行星数据的排序数据
如果我按人口降序排序，我希望数据为：

planets: [
          {
            planetName: '1',
            countries: [
              {
                countryName:'2';
                population: 9000,
                worth: 10,
              },
               {
                countryName:'1';
                population: 432,
                worth: 65,
              },
              {
                countryName:'3';
                population: 80,
                worth: 200,
              },

            ],
          },
         {
            planetName: '2',
            countries: [
              {
                countryName:'2';
                population: 800,
                worth: 1,

              },
              {
                countryName:'3';
                population: 88,
                worth: 77,
              },
              {
                countryName:'1';
                population: 80,
                worth: 100,
              },
            ],
          },
        ],`

行星的顺序应该保持不变，但每个行星上的国家应该根据选项（按人口或按价值）进行排序
任何想法如何可以排序这些。也许lodash链，Map可以帮助，但我不知道如何使用它。

reactjs

来源：https://stackoverflow.com/questions/74306206/sorting-nested-object-lists-in-reactjs

1条答案

按热度按时间

4xrmg8kj1#

在一个react钩子中，行星列表是它的状态之一，你可以这样排序：

const [planets, setPlanets] = useState(initialPlanets);

const sort = () => {
  const newPlanetList = [];

  for(const planet of planets) {
    const newPlanet = { ...planet, countries: [...planet.countries] };
    newPlanet.countries.sort((a, b) => {
      if(a.population == b.population) {
        return a.worth - b.worth;
      }
      return a.population - b.population;
    })
    newPlanetList.push(newPlanet);
  }

  setPlanets(newPlanetList);
}

排序算法很简单，如果人口相同，就按星球的价值进行比较，否则就按星球的价值进行比较。这样，你就可以得到一个主要按人口排序的列表，而在人口相同的星球中，它们将按价值排序。
关于嵌套对象中的React状态更新，重要的一点是，您应该始终确保传递给setState函数的对象引用与当前状态不同，因此，在本例中，我复制了数组，而不是只调用planets.forEach(planet => planet.countries.sort(...))，因为这样做是行不通的。

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 排序reactj中的嵌套对象列表

1条答案

相关问题

热门标签

最新问答