ReactJS - 按升序和降序排序答案

【问题标题】：ReactJS - sort by ascending and descendingReactJS - 按升序和降序排序
【发布时间】：2023-03-07 18:44:01
【问题描述】：

我正在尝试根据我的联系人标题重新排序我的结果（JSON 文件）。

初始渲染工作正常，按 JSON 文件中的顺序显示 JSON 文件的结果。

当我更改选择下拉菜单时，我希望它能够更新呈现 JSON 结果的 .map 函数（第 143 行）。

正在发生的一切都不算什么。没有变化，没有错误，只是选择下拉选项更改为所选值。

不太确定为什么它不起作用，花了几个小时尝试调试，打赌我错过了一些非常简单的东西。

任何帮助将不胜感激，因为我不知道问题是什么......

var getContactList = [
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "job": "Manager",
      "email": "Sincere@april.biz",
      "phone": "1-770-736-8031 x56442",
      "website": "http://www.hildegard.org",
      "company": "Romaguera-Crona"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "job": "CEO",
      "email": "Shanna@melissa.tv",
      "phone": "010-692-6593 x09125",
      "website": "http://www.anastasia.net",
      "company": "Deckow-Crist"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "username": "Samantha",
      "job": "Manager",
      "email": "Nathan@yesenia.net",
      "phone": "1-463-123-4447",
      "website": "http://www.ramiro.info",
      "company": "Romaguera-Jacobson"
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "username": "Karianne",
      "job": "Store Clerk",
      "email": "Julianne.OConner@kory.org",
      "phone": "493-170-9623 x156",
      "website": "http://www.kale.biz",
      "company": "Robel-Corkery"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "username": "Kamren",
      "job": "Store Clerk",
      "email": "Lucio_Hettinger@annie.ca",
      "phone": "(254)954-1289",
      "website": "http://www.demarco.info",
      "company": "Keebler LLC"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "username": "Leopoldo_Corkery",
      "job": "Store Clerk",
      "email": "Karley_Dach@jasper.info",
      "phone": "1-477-935-8478 x6430",
      "website": "http://www.ola.org",
      "company": "Considine-Lockman"
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "username": "Elwyn.Skiles",
      "job": "Manager",
      "email": "Telly.Hoeger@billy.biz",
      "phone": "210.067.6132",
      "website": "http://www.elvis.io",
      "company": "Johns Group"
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "username": "Maxime_Nienow",
      "job": "Store Clerk",
      "email": "Sherwood@rosamond.me",
      "phone": "586.493.6943 x140",
      "website": "http://www.jacynthe.com",
      "company": "Abernathy Group"
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "username": "Delphine",
      "job": "Store Clerk",
      "email": "Chaim_McDermott@dana.io",
      "phone": "(775)976-6794 x41206",
      "website": "http://www.conrad.com",
      "company": "Yost and Sons"
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "username": "Moriah.Stanton",
      "job": "Store Clerk",
      "email": "Rey.Padberg@karina.biz",
      "phone": "024-648-3804",
      "website": "http://www.ambrose.net",
      "company": "Hoeger LLC"
    }
  ];

const App = React.createClass({

  getInitialState: function() {
    return {
      orderSelect: ''
    };
  },
  change: function(e) {
    this.setState({
      orderSelect: e.target.value
    });
  },
  render: function() {
    var contactsData = this.props.items,
      orderSelect = this.state.orderSelect.trim().toLowerCase();

    if (String(orderSelect) == "asc") {
      contactsData.sort(function(a, b) {
        return a.name.toLowerCase() > b.name.toLowerCase();
      })
    } else if (String(orderSelect) == "desc") {
      contactsData.sort(function(a, b) {
        return a.name.toLowerCase() < b.name.toLowerCase();
      })
    } else if (String(orderSelect) == "submitted") {
      contactsData = getContactsList
    }

    return( 
    <div>

      <select onChange={this.change} value={this.state.orderSelect}>
        <option value="" disabled=""> Sort by </option> 
        <option value="submitted"> Submitted Date </option> 
        <option value="asc"> A - Z </option> 
        <option value="desc"> Z - A </option> 
      </select>

      {
        contactsData.map(function(l, index) {
          return (
            <div key={index}>
              {l.name}
            </div>
          )
        })
      }

      </div>           
    );

  }
});


ReactDOM.render(
<App items={getContactList} />,
document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

<div id="app"></div>

【问题讨论】：

运行 sn-p 给我一个错误
“它不工作”是什么意思？你看到什么行为，你期待什么行为？控制台中是否有任何 Javascript 错误？
没有。那是一个数组，因此您指向内存中的相同位置。你需要复制你的 props 数组。
Heres a working example doing what you want :) 虽然我会将排序重构为渲染之外的某个地方。可能将数组调整为状态属性，以便您可以更改顺序
Sweet，干杯，我会看看它，我注意到你已经升级了 react 版本，所以我会试一试并尝试把它全部纳入。谢谢为了您的帮助，这给了我一个很好的起点。

标签： reactjs onchange

【解决方案1】：

你得到你的答案了吗？这是我的解决方案，希望对您有所帮助。

getContactList
   .sort(
      ({ job: prevOr }, { job: curOr }) => prevOr - curOr
   )
   .map((slider) => (
      <SliderItem key={slider.order} slider={slider} />
   ))

我会创建一个三元组，如果值是 A - Z 这个这个，如果是 Z - A 那么这个代码但是使用 curOr - prevOr。

【讨论】：