reactjs - 为嵌套在状态中的值创建排序依据按钮

Question

我想创建一个排序函数来按口味对冰淇淋进行排序，无论是升序还是降序。我的问题是我无法动态访问口味。我可以通过 访问个人口味值iceCreams[0].taste，但如果我想按按钮创建排序，这并不好：

  state = {
    iceCreams: [
      {
        name: 'Zap',
        taste: 6,
        img:
          'blah1'
      },
      {
        name: 'Feast',
        taste: 8,
        img:
          'blah2'
      },
      {
        name: 'Mini-Milk',
        taste: 2,
        img:
          'blah3'
      }
    ]},

标签： reactjs

Answer 1

您可以简单地sort在 javascript 中使用该函数。例如，为了对冰淇淋数组进行排序，您可以使用以下代码：

iceCreams.sort((a,b)=>a.taste-b.taste)

所以你的函数看起来像这样：

const sort = (type = "asc") => {
  const { iceCreams } = this.state;
  const multiplier = type === "asc" ? +1 : -1;
  const sortedIceCreams = iceCreams.sort(
    (a, b) => multiplier * (a.taste - b.taste)
  );
  this.setState({iceCreams : sortedIceCreams})
};

它接受一个类型（'asc' 或其他）并使用上述函数对冰淇淋进行排序。